在父组件的模板中直接使用子组件的选择器,将子组件的模板嵌套在父组件的模板中。子组件的内容会被呈现在父组件的模板中。
在父组件中通过@ViewChild装饰器来获取子组件的实例,然后将子组件的实例加入到父组件的模板中。父组件就可以显示子组件的内容。
父组件模板:
父组件代码:
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ChildComponent } from './child.component';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent implements AfterViewInit {
@ViewChild('childContainer', { static: false }) childContainer: ElementRef;
constructor() {}
ngAfterViewInit() {
const childComponent = new ChildComponent();
childComponent.viewContainerRef = this.childContainer;
childComponent.ngOnInit();
}
}
子组件:
import { Component } from '@angular/core';
@Component({
selector: 'app-child',
template: `
Child component content goes here
`
})
export class ChildComponent {
constructor() {}
viewContainerRef: any;
ngOnInit() {
this.viewContainerRef.nativeElement.innerHTML = this.template;
}
get template() {
return `
Child component content goes here
`;
}
}