在Angular 6中,可以通过以下步骤来添加子组件并访问它:
parent.component.ts
,子组件为child.component.ts
。// parent.component.ts
import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from './child.component';
@Component({
selector: 'app-parent',
template: `
`
})
export class ParentComponent {
@ViewChild(ChildComponent) childComponent: ChildComponent;
addChild() {
// 在这里添加子组件
}
ngAfterViewInit() {
// 访问子组件
console.log(this.childComponent);
}
}
// child.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-child',
template: 'Child Component
'
})
export class ChildComponent {
// 子组件的逻辑
}
在父组件中使用ViewChild
装饰器来访问子组件。在父组件的模板中,使用
添加子组件。
在父组件的ngAfterViewInit()
方法中访问子组件。在这个生命周期钩子函数中,子组件已经被创建并可以访问。
可以在addChild()
方法中添加更多的子组件,以满足需求。
这样,当父组件加载后,它将添加子组件并在ngAfterViewInit()
中访问子组件。您可以在控制台中查看子组件对象,以确保它已被添加和访问。