我正在尝试将一个组件的templateRef渲染到另一个组件的ng-container中。
目标组件使用templateRef接收对方法showTemplate的调用,我想渲染它并在显示之后对其进行进一步修改,即从模板滚动到任意元素。
目标组件如下所示:
export class OverlayComponent {
embeddedViewRef: EmbeddedViewRef<any>;
@ViewChild('mntPageOverlayContainer', {read: ViewContainerRef}) container: ViewContainerRef;
showTemplate(value: TemplateRef<any>, props?: OverlayProps) {
this.embeddedViewRef = this.container.createEmbeddedView(value);
if (props && props.onShow) {
this.embeddedViewRef.rootNodes.forEach(element => [make modifications to it]);
}
}
html模板包含以下元素:
<ul>
<li *ngFor="let m of months">
<a (click)="selectMonth(m)" [ngClass]="{'selected': m === month}">{{monthNameFor(m)}}</a>
</li>
</ul>
我希望能够在整个模板呈现之后调用props.onShow(element)
,以便我可以对其进行进一步修改。特别是,我想滚动查看<li>
与css类selected
。
但似乎发生的事情是Angular调用我的代码之后只添加了模板的根元素,而不是整个子树。只有<ul>
元素可用,模板中的<li>
元素将在稍后呈现。