我想要一個組件指令來渲染放置在其選擇器內(nèi)的任何內(nèi)容，以便在其 html 內(nèi)的特定部分進(jìn)行渲染。在這種情況下，頁眉、頁腳、主要內(nèi)容。任何.html<any-selector> <div>content to place</div></any-selector>期望它呈現(xiàn)以下內(nèi)容任意選擇器.html<header><div>content to place</div></header><main><div>content to place</div></main><footer><div>content to place</div></footer>嘗試過，ng-content但它僅在第一次出現(xiàn)時呈現(xiàn)<ng-content>如果有什么辦法可以達(dá)到這個目的嗎？
1 回答
ITMISS
TA貢獻(xiàn)1871條經(jīng)驗(yàn) 獲得超8個贊
因此，這是 的預(yù)期行為ng-content，要么您將[select]指向某個ng-content，要么您可以僅在第一次出現(xiàn) 時進(jìn)行渲染ng-content。
我嘗試了一種對我有用的方法。這是演示工作代碼
<any-selector>
<div #myProjection>content to place</div>
</any-selector>
然后在app-selector.HTML中你可以這樣做：
<div id='border'>
<h1>Hello Component</h1>
<header><div #canvas></div></header>
<footer><div #canvas></div></footer>
</div>
應(yīng)用程序選擇器.組件
@ViewChildren("canvas") canvas: QueryList<ElementRef>;
@ContentChild("myProjection") str : ElementRef;
ngAfterViewInit() {
this.canvas.forEach((div: ElementRef) =>
div.nativeElement.insertAdjacentHTML('beforeend', this.str.nativeElement.innerHTML));
}
- 1 回答
- 0 關(guān)注
- 118 瀏覽
添加回答
舉報
0/150
提交
取消