@ViewChild
和@ViewChildren
从视图DOM查询元素,@ContentChild
和@ContentChildren
查询内容DOM中的元素。
@ViewChildren(WriterComponent)
writers: QueryList<WriterComponent>;
@ContentChildren(WriterComponent)
writers: QueryList<WriterComponent>
在这里我无法理解视图DOM和内容DOM之间究竟有什么区别,有人可以解释一下吗?
我们假设有一个名为my-component的组件。
@ ViewChild和@ViewChildren将在该组件模板中获取一些内容,因此my-component.component.html文件中包含一个html元素。
@ContentChild和@ContentChildren将使用my-component获取父组件括号之间的内容。因此,让我们在parent.component.html中拥有以下内容:
<my-component>
<div class="name">Hans</div>
</my-component>
您可以使用@ContentChild和@ContentChildren来获取“Hans”元素。
位于其组件模板内部的children元素称为视图子元素。另一方面,在给定组件的主元素的开始标记和结束标记之间使用的元素称为内容子元素。
访问View Children:View Child Docs
import {ViewChild, ViewChildren, Component, AfterViewInit...} from '@angular/core';
// ...
@Component({
selector: 'todo-app',
template: `...`
})
class TodoAppComponent implements AfterViewInit {
@ViewChild(TodoInputComponent) inputComponent: TodoInputComponent
@ViewChildren(TodoComponent) todoComponents: QueryList<TodoComponent>;
constructor(private todos: TodoList) {}
ngAfterViewInit() {
// available here
}
}
访问内容儿童:Content Children Docs
@Component({
selector: 'app-footer',
template: '<ng-content></ng-content>'
})
class FooterComponent {}
@Component(...)
class TodoAppComponent {...}
@Component({
selector: 'demo-app',
styles: [
'todo-app { margin-top: 20px; margin-left: 20px; }'
],
template: `
<content>
<todo-app>
<app-footer>
<small>Yet another todo app!</small>
</app-footer>
</todo-app>
</content>
`
})
export class AppComponent {}
// ... in TodoAppComponent
@Component(...)
class TodoAppComponent implements AfterContentInit {
@ContentChild(FooterComponent) footer: FooterComponent;
ngAfterContentInit() {
// this.footer now points to the instance of `FooterComponent`
}
}
// ...