使用 ng-content 将内容投影到组件中

在Angular中，我们可以通过组件间的嵌套来构建应用程序的UI。而且，Angular提供了一个指令叫做ng-content，可以将组件内部的内容投影到组件中。

ng-content指令的基本用法

ng-content指令可以放置在组件模板中，作为组件的一个插槽，来接收外部传入的内容。示例代码如下：

<my-component>
    <span>Hello World</span>
</my-component>

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

@Component({
  selector: 'my-component',
  template: '<div><ng-content></ng-content></div>'
})
export class MyComponent {}

在上面的例子中，<my-component>标签中的<span>内容会被投影到<ng-content></ng-content>这个插槽中，并被加入到<div>标签中。

ng-content指令的高级用法

ng-content指令除了可以简单地将模板投影到组件中，还可以额外传入一些属性。下面的例子中，我们通过select属性来选择特定的插槽，使模板在不同的位置被投影：

<my-component>
  <span>这段文字会被投影到左边</span>
  <span slot="right">这段文字会被投影到右边</span>
</my-component>

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

@Component({
  selector: 'my-component',
  template: `
    <div>
      <div class="left"><ng-content></ng-content></div>
      <div class="right"><ng-content select="[slot=right]"></ng-content></div>
    </div>
  `
})
export class MyComponent {}

在上面的代码中，我们给第二个<span>标签添加了一个slot="right"属性，然后使用select属性选择了这个特定的插槽。

ng-content指令的配合ng-container使用

ng-container是Angular中的另外一个指令，它可以在模板中创建一个容器，但是不会被渲染成DOM元素。我们可以将它和ng-content指令一起使用，来对模板进行一些逻辑控制。

在下面的例子中，我们将ng-container和ng-content指令结合起来，根据一些条件来判断是否显示投影内容：

<my-component [hidden]="true">
  <div>这段文字是永远不会被显示出来的</div>
  <ng-container *ngIf="showContent">
    <div>这段文字会被显示出来</div>
  </ng-container>
</my-component>

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

@Component({
  selector: 'my-component',
  template: '<ng-container><ng-content></ng-content></ng-container>'
})
export class MyComponent {
  showContent = true;
}

在上面的代码中，我们将模板放在了ng-container中，并使用*ngIf来控制是否显示投影内容。这样做的好处是，即使我们将这段代码包装在一个隐藏的<my-component>标签中，也不会影响内容的显示效果。

总结

ng-content指令是Angular中非常强大的一个指令，它可以让我们在组件中非常方便地进行内容投影的控制。通过这篇文章，希望你能更好地理解ng-content的基本用法和高级用法，以及它和ng-container指令的结合使用。