angular 4.x ng-content 指令用法详解

引言

Angular 4.x 是目前前端开发中最流行的框架之一。其中，ng-content 指令是 Angular 中一个非常有用的指令，它可以用于在父组件模板中插入子组件模板。这篇文章将为大家详细介绍 Angular 4.x 中的 ng-content 指令用法。

ng-content 指令概述

ng-content 指令可以在父组件模板中插入子组件模板，从而实现动态组件加载的功能。举个例子，如果你在父组件中编写了如下代码：

<custom-component>
   <h1>这是自定义的标题</h1>
   <p>这是自定义的内容</p>
</custom-component>

那么在 custom-component 组件中，你可以使用 ng-content 指令来插入上面的标题和内容，代码如下所示：

<!-- custom-component.component.html -->
<div>
   <ng-content select="h1"></ng-content>
   <ng-content select="p"></ng-content>
</div>

在上述代码中，ng-content 标签中的 select 属性用于指定需要插入的子组件模板。这样，当 custom-component 组件被渲染时，子组件模板的内容就会动态加载到父组件模板中。

ng-content 指令详解

1. ng-content 的 select 属性

ng-content 指令可以通过 select 属性来指定需要插入的子组件模板。这个属性的取值可以是一个 CSS 选择器，也可以是一个组件的名称。

如果需要插入的子组件模板是一个组件而不是一个 DOM 元素，那么可以在子组件的 @Component 装饰器中使用 selector 属性来指定组件的名称。

<custom-component>
   <child-component></child-component>
</custom-component>

// child.component.ts
@Component({
   selector: 'child-component',
   template: `
      <h1>这是子组件的标题</h1>
      <p>这是子组件的内容</p>
   `
})
export class ChildComponent {}

<!-- custom-component.component.html -->
<div>
   <ng-content select="child-component"></ng-content>
</div>

在上述代码中，custom-component 组件可以使用 select 属性来插入子组件 ChildComponent 。这样，当 custom-component 组件被渲染时，会动态地加载 ChildComponent 组件的内容，并把它放到 ng-content 标签所在的位置。

2. 多个 ng-content 标签

在一个组件模板中，你可以使用多个 ng-content 标签来指定不同的子组件模板。这些 ng-content 标签的 select 属性应该不同，以便可以区分它们各自需要插入的子组件模板。

<!-- custom-component.component.html -->
<div>
   <h1>这是 custom-component 的标题</h1>
   <ng-content select=".content"></ng-content>
   <p>这是 custom-component 的尾部</p>
</div>

在上述代码中，custom-component 组件模板中有三个 DOM 元素：h1 元素、p 元素以及类名为 content 的 ng-content 标签。这三个元素都是在 custom-component 组件模板中定义的。当 custom-component 组件被渲染时，会把 .content 类名所选中的子组件模板插入到 ng-content 标签所在的位置，并保留 h1 元素以及 p 元素不变。

3. ng-content 的动态组件加载能力

ng-content 指令的动态组件加载能力让你可以在父组件中使用子组件的具体类型，从而实现动态组件加载的功能。

<!-- app.component.html -->
<custom-component [componentType]="textComponent"></custom-component>

// app.component.ts
import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { TextComponent } from './text.component';
import { CustomComponent } from './custom.component';

@Component({
   selector: 'app-root',
   template: '<custom-component [componentType]="textComponent"></custom-component>'
})
export class AppComponent {
   @ViewChild(CustomComponent, {read: ViewContainerRef}) container;
   textComponent = TextComponent;

   constructor(private _cfr: ComponentFactoryResolver) {}

   ngAfterViewInit() {
      const childComponent = this._cfr.resolveComponentFactory(TextComponent);
      this.container.createComponent(childComponent);
   }
}

在上述代码中，app.component 中的 {{textComponent}} 符合 Angular 组件约定，指向了 TextComponent 组件类型。在 CustomComponent 组件中，我们使用了 ng-content，同时也引入了 componentType 输入属性。这样 CustomComponent 就可以在运行时根据 componentType 的值动态地创建所需要的子组件类型（在这里是 TextComponent），并将它们加载到 CustomComponent 中。

总结

ng-content 指令是 Angular 4.x 中非常有用的一个指令，它可以用于在父组件模板中插入子组件模板，实现动态组件加载的功能。通过本文的介绍，我们可以学习到 ng-content 指令的使用方法以及它的一些高级功能。相信它能够为已经掌握 Angular 的前端工程师们带来更多的灵活性和效率。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b9acbdadd4f0e0ff22ee6b