Angular 2 ContentChild & ContentChildren

前面的文章我们已经介绍过了 Angular 2 的 ViewChild & ViewChildren 属性装饰器，现在我们就来介绍一下它们的兄弟 ContentChild 和 ContentChildren 属性装饰器。我想通过一个简单的需求，来引入我们今天的主题。具体需求如下：

熟悉 Angular 1.x 的用户，应该都知道 ng-transclude 指令，通过该指令我们可以非常容易实现上述的功能。而在 Angular 2 中引入新的 ng-content 指令，我们马上动手试一下。

greet.component.ts

import { Component } from ''@angular/core'';

@Component({
    selector: ''exe-greet'',
    template: `
    <div>
        <p>Greet Component</p>  
        <ng-content></ng-content>
    </div>
    `,
    styles: [` .border { border: 2px solid #eee; } `]
})
export class GreetComponent { }

app.component.ts

import { Component } from ''@angular/core'';

@Component({
  selector: ''my-app'',
  template: `
    <h4>Welcome to Angular World</h4>
    <exe-greet>
      <p>Hello Semlinker</p>
    </exe-greet>
  `,
})
export class AppComponent { }

以上代码运行后，浏览器的输出结果：

是不是感觉太简单了，那我们来升级一下需求，即我们的 GreetComponent 组件要支持用户自定义卡片风格的问候内容，具体如下图所示：

这个功能也很简单啊，我们马上看一下代码：

import { Component } from ''@angular/core'';

@Component({
  selector: ''my-app'',
  template: `
    <h4>Welcome to Angular World</h4>
    <exe-greet>
      <div>
         <div>Card Header</div>
         <div>Card Body</div>
         <div>Card Footer</div>
      </div>
    </exe-greet>
  `,
})
export class AppComponent { }

以上代码运行后，浏览器的输出结果：

功能是实现了，但有没有什么问题 ？假设在另一个页面，也需要使用 GreetComponent 组件 ，那么还需要再次设置预设的样式。我们能不能把卡片风格的各个部分默认样式定义在 GreetComponent 组件中，使用组件时我们只需关心自定内容区域的样式，答案是可以的，调整后的代码如下：

import { Component } from ''@angular/core'';

@Component({
    selector: ''exe-greet'',
    template: `
    <div>
        <p>Greet Component</p>  
        <div>
            <div>
                <ng-content></ng-content>
            </div>
            <div>
                <ng-content></ng-content>
            </div>
            <div>
                 <ng-content></ng-content>
            </div>
        </div>
    </div>
    `,
    styles: [` .border { border: 2px solid #eee; } `]
})
export class GreetComponent{ }

GreetComponent 组件已经调整好了，现在剩下的问题就是如何从父级组件动态的抽取各个部分的内容。幸运的是，ng-content 指令支持 select 属性，它允许我们设定抽取的内容，更强大的是它支持我们常用的选择器类型，如标签选择器、类选择器、ID选择器、属性选择器等。

greet.component.ts - template

<div>
     <div>
         <ng-content select="header"></ng-content>
     </div>
     <div>
         <ng-content select=".card_body"></ng-content>
     </div>
     <div>
         <ng-content select="footer"></ng-content>
     </div>
</div>

app.component.ts

import { Component } from ''@angular/core'';

@Component({
  selector: ''my-app'',
  template: `
    <h4>Welcome to Angular World</h4>
    <exe-greet>
      <header>Card Header</header>
          <div>Card Body</div>
      <footer>Card Footer</footer>
    </exe-greet>
  `,
})
export class AppComponent { }

以上代码运行后，在浏览上我们可以看到预期的结果，接下来该我们的主角 - ContentChild 出场了。

ContentChild

在正式介绍 ContentChild 属性装饰器前，我们要先了解一下 Content Projection (内容投影)。

以前面的例子为例，我们在 AppComponent 组件中定义的内容，通过 ng-content 指令提供的选择器，成功投射到 GreetComponent 组件中。了解完 Content Projection，接下来我们来介绍 ContentChild。

ContentChild 是属性装饰器，用来从通过 Content Projection 方式设置的视图中获取匹配的元素。

@ContentChild 示例

child.component.ts

import { Component } from ''@angular/core'';

@Component({
    selector: ''exe-child'',
    template: `
      <p>Child Component</p>  
    `
})
export class ChildComponent {
    name: string = ''child-component'';
}

parent.component.ts

import { Component, ContentChild, AfterContentInit } from ''@angular/core'';
import { ChildComponent } from ''./child.component'';

@Component({
    selector: ''exe-parent'',
    template: `
      <p>Parent Component</p>  
      <ng-content></ng-content>
    `
})
export class ParentComponent implements AfterContentInit {
    @ContentChild(ChildComponent)
    childCmp: ChildComponent;

    ngAfterContentInit() {
        console.dir(this.childCmp);
    }
}

app.component.ts

import { Component } from ''@angular/core'';

@Component({
  selector: ''my-app'',
  template: `
    <h4>Welcome to Angular World</h4>
    <exe-parent>
      <exe-child></exe-child>
    </exe-parent>
  `,
})
export class AppComponent { }

以上代码运行后，控制台的输出结果：

ContentChildren

ContentChildren 属性装饰器用来从通过 Content Projection 方式设置的视图中获取匹配的多个元素，返回的结果是一个 QueryList 集合。

@ContentChildren 示例

parent.component.ts

import { Component, ContentChildren, QueryList, AfterContentInit } from ''@angular/core'';
import { ChildComponent } from ''./child.component'';

@Component({
    selector: ''exe-parent'',
    template: `
      <p>Parent Component</p>  
      <ng-content></ng-content>
    `
})
export class ParentComponent implements AfterContentInit {
    
    @ContentChildren(ChildComponent)
    childCmps: QueryList<ChildComponent>;

    ngAfterContentInit() {
        console.dir(this.childCmps);
    }
}

app.component.ts

import { Component } from ''@angular/core'';

@Component({
  selector: ''my-app'',
  template: `
    <h4>Welcome to Angular World</h4>
    <exe-parent>
      <exe-child></exe-child>
      <exe-child></exe-child>
    </exe-parent>
  `,
})
export class AppComponent { }

以上代码运行后，控制台的输出结果：

ContentChild 接口及装饰器

ContentChildDecorator 接口

export interface ContentChildDecorator {
  // Type类型：@ContentChild(ChildComponent)
  (selector: Type<any>|Function|string, {read}?: {read?: any}): any;

  new (selector: Type<any>|Function|string, {read}?: {read?: any}): ContentChild;
}

ContentChildDecorator 装饰器

export const ContentChild: ContentChildDecorator = makePropDecorator(
    ''ContentChild'',
    [
      [''selector'', undefined], {
        first: true,
        isViewQuery: false, // ViewChild或ViewChildren装饰器时为true
        descendants: true,
        read: undefined,
      }
    ],
Query);

我有话说

ContentChildren 与 ViewChildren 的定义

• 在 host 元素 <opening> 和 </closing> 标签中被称为 Content Children

• 在组件的模板中定义的内容，它是组件的一部分，被称为 View Children

ContentChild 与 ViewChild 的异同点

相同点

• 都是属性装饰器

• 都有对应的复数形式装饰器：ContentChildren、ViewChildren

• 都支持 Type<any>|Function|string 类型的选择器

不同点

• ContentChild 用来从通过 Content Projection 方式 (ng-content) 设置的视图中获取匹配的元素

• ViewChild 用来从模板视图中获取匹配的元素

• 在父组件的 ngAfterContentInit 生命周期钩子中才能成功获取通过 ContentChild 查询的元素

• 在父组件的 ngAfterViewInit 生命周期钩子中才能成功获取通过 ViewChild 查询的元素

在 Root Component 中无法使用 `ng-content

原因主要有以下几点：

• <my-app></my-app> 标签之间的信息是用来表明 Angular 的应用程序正在启动中

• Angular 2 编译器不会处理 index.html 文件中设置的绑定信息，另外出于安全因素考虑，为了避免 index.html 中的 {{}} 插值，被服务端使用的模板引擎处理。

总结

本文先通过一个简单的需求，引出了 Angular 2 中的 ng-content 指令，进而介绍了 Angular Content Projection (内容投影) 的概念，最后才正式介绍 ContentChild 和 ContentChildren 属性装饰器。另外在文末我们也介绍了 ContentChild 与 ViewChild 的异同点，希望本文能帮助读者更好地理解相关的知识点。

Angular 2 中的 ViewChildren 和 ContentChildren

map ((*2).(+1)) [1,2,3] -- [4,6,8]

// ...
@Component({
  selector: 'todo-app',providers: [TodoList],directives: [TodoCmp,TodoInputCmp],template: `
    <section>
      Add todo:
      <todo-input (onTodo)="addTodo($event)"></todo-input>
    </section>
    <section>
      <h4 *ngIf="todos.getAll().length">Todo list</h4>
      <todo *ngFor="var todo of todos.getAll()" [todo]="todo">
      </todo>
    </section>
    <ng-content select="footer"></ng-content>
  `
})
class TodoAppCmp {
  constructor(private todos: TodoList) {}
  addTodo(todo) {
    this.todos.add(todo);
  }
}
// ...

<todo-app></todo-app>

<todo-app>
  <footer>
    Yet another todo app!
  </footer>
</todo-app>

import {ViewChild,ViewChildren,Component...} from 'angular2/core';

// ...

@Component({
  selector: 'todo-app',template: `...`
})
class TodoAppCmp {
  @ViewChild(TodoInputCmp)
  inputComponent: TodoInputCmp
  @ViewChildren(TodoCmp)
  todoComponents: QueryList<TodoCmp>;

  constructor(private todos: TodoList) {}
  ngAfterViewInit() {
    // available here
  }
}

// ...

@Component({
  selector: 'footer',template: '<ng-content></ng-content>'
})
class Footer {}

@Component(...)
class TodoAppCmp {...}

@Component({
  selector: 'app',styles: [
    'todo-app { margin-top: 20px; margin-left: 20px; }'
  ],template: `
    <content>
      <todo-app>
        <footer>
          <small>Yet another todo app!</small>
        </footer>
      </todo-app>
    </content>
  `,directives: [TodoAppCmp,NgModel,Footer]
})
export class AppCmp {}

// ...
@Component(...)
class TodoAppCmp {
  @ContentChild(Footer)
  footer: Footer;
  ngAfterContentinit() {
    // this.footer is Now with value set
  }
}
// ...

class TodoList {
  private todos: Todo[] = [];
  add(todo: Todo) {}
  remove(todo: Todo) {}
  set(todo: Todo,index: number) {}
  get(index: number) {}
  getAll() {}
}

@Component({
  // ...
  viewProviders: [TodoList],// ...
})
class TodoAppCmp {
  constructor(private todos: TodoList) {}
  // ...
}

EXCEPTION: No provider for TodoList! (Footer -> TodoList)

今天关于Parent child mysql的讲解已经结束，谢谢您的阅读，如果想了解更多关于($children,$refs，$parent) 的使用、.parent：hover仅适用于.children而不适用于.parent、Angular 2 ContentChild & ContentChildren、Angular 2 中的 ViewChildren 和 ContentChildren的相关知识，请在本站搜索。