Angular 内容投影

在Angular中，内容投影（Content Projection）是一种将父组件中的内容嵌套到子组件中的技术。这使得开发者能够创建更灵活和可复用的组件。

以下是内容投影的基本使用方法：

1. 子组件中的投影点：在子组件的模板中，使用 <ng-content></ng-content> 标签作为投影点，表示父组件的内容将插入到这个位置。

    // 子组件
    @Component({
      selector: 'app-child',
      template: `
        <div>
          <h2>Child Component</h2>
          <ng-content></ng-content> <!-- 投影点 -->
        </div>
      `
    })
    export class ChildComponent { }

2. 父组件中的使用：在父组件的模板中，将需要投影的内容包裹在子组件的标签中。

    // 父组件
    @Component({
      selector: 'app-parent',
      template: `
        <app-child>
          <p>This content will be projected into the child component.</p>
          <span>Another projected content.</span>
        </app-child>
      `
    })
    export class ParentComponent { }

在这个例子中，<p> 和 <span> 中的内容将被投影到 <ng-content></ng-content> 所在的位置，替代了子组件中的投影点。

内容投影的优势在于可以更好地封装组件，并且使组件的结构更加灵活。你可以通过 ng-content 的选择器来选择特定的投影内容，以实现更精细的控制。例如：

// 子组件
@Component({
  selector: 'app-child',
  template: `
    <div>
      <h2>Child Component</h2>
      <ng-content select="p"></ng-content> <!-- 只投影p标签 -->
    </div>
  `
})
export class ChildComponent { }

// 父组件
@Component({
  selector: 'app-parent',
  template: `
    <app-child>
      <p>This content will be projected into the child component.</p>
      <span>This won't be projected.</span>
    </app-child>
  `
})
export class ParentComponent { }

在这个例子中，只有 <p> 中的内容被投影到子组件，而 <span> 中的内容被忽略。

转载请注明出处：http://www.pingtaimeng.com/article/detail/4915/Angular