在Angular中,可以通过使用@ViewChild
装饰器来引用一个没有名称的出口。下面是一个包含代码示例的解决方法:
@ViewChild
装饰器引用出口元素:import { Component, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
@Component({
selector: 'app-example',
template: `
`
})
export class ExampleComponent {
@ViewChild('outlet1', { read: TemplateRef, static: true }) template1: TemplateRef;
@ViewChild('outlet2', { read: TemplateRef, static: true }) template2: TemplateRef;
constructor(private viewContainerRef: ViewContainerRef) { }
ngAfterViewInit() {
// 渲染第一个模板
this.viewContainerRef.createEmbeddedView(this.template1);
// 渲染第二个模板
this.viewContainerRef.createEmbeddedView(this.template2);
}
}
这样,两个没有名称的出口就可以正常工作了。