我想要一個組件指令來渲染放置在其選擇器內的任何內容，以便在其 html 內的特定部分進行渲染。在這種情況下，頁眉、頁腳、主要內容。任何.html<any-selector> <div>content to place</div></any-selector>期望它呈現以下內容任意選擇器.html<header><div>content to place</div></header><main><div>content to place</div></main><footer><div>content to place</div></footer>嘗試過，ng-content但它僅在第一次出現時呈現<ng-content>如果有什么辦法可以達到這個目的嗎？
1 回答
ITMISS
TA貢獻1871條經驗 獲得超8個贊
因此，這是 的預期行為ng-content，要么您將[select]指向某個ng-content，要么您可以僅在第一次出現 時進行渲染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>
應用程序選擇器.組件
@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 關注
- 110 瀏覽
添加回答
舉報
0/150
提交
取消