Ng-container/content/template

在Angular中，ng-container、ng-content和ng-template是三个相对常用的指令。它们的使用可以提高我们的代码组织能力以及可重用性。接下来将详细介绍这三个指令的区别和作用。

ng-container

ng-container是一个容器指令。它不会添加任何额外的HTML元素或样式，并且当Angular渲染页面时，它将被完全移除。ng-container最常用的是结合结构型指令例如：*ngIf、*ngFor等一起使用。以下面的例子为例：

<div *ngIf='isShow'>我出现了</div>

我们可以看到*ngIf会生成一个div元素。如果我们不想要这个div元素而只是想条件控制一些内容的显隐，就可以使用ng-container来达到目的。

<ng-container *ngIf='isShow'>我出现了</ng-container>

这种写法不会生成多余的div元素，所以可以减少DOM节点。

ng-content

ng-content是一种内嵌标签内容的指令。通常情况下，我们创建组件都会把组件与组件内部的内容分离。而ng-content就是在组件内部插入内容的一种方式。让我们来看一下下面的例子：

<!-- app.component.html -->
<app-my-component>Content to wrap in my-component</app-my-component>

<!-- my-component.component.ts -->
@Component({
  selector: 'app-my-component',
  template: `
    <div class="wrapper">
      <h2>My Component Header</h2>
      <ng-content></ng-content>
    </div>
  `,
})
export class MyComponent {}

在上面的代码中，我们创建了一个组件并在它的模板中使用了ng-content。在实际应用中使用该组件时，可以将要嵌套的内容包在标签内部。

<app-my-component>
  <div>Content to wrap in my-component</div>
</app-my-component>

在运行时，Angular会将替换成包裹的内容。

ng-template

ng-template是一种定义可重用代码块的方式。我们可以利用ng-template来预定义一个模板，并且在需要时渲染出来。这通过ngTemplateOutlet去实现，下面是一个基本的例子：

<ng-template #header>
  <h2>Website Header</h2>
</ng-template>

<ng-container *ngTemplateOutlet="header"></ng-container>

在这个例子中，我们给ng-template定义了一个ID为header，并且在ng-container指令中引入头部模板。当页面运行时，Angular会直接将ng-container中的ngTemplateOutlet替换成预定义好的模板，这里是<h2>Website Header</h2>。

总结

ng-container、ng-content 和 ng-template都是Angular提供的非常有用的指令。总体来说，它们都有着不同的用途和限制，但是当它们被结合使用时，我们就可以更好地组织模板并编写出更加清晰、简洁的代码。在实际使用过程中，需要根据具体场景去选择合适的指令。