角度： ng-content

`ng-content` 是 Angular 中的一个指令，它允许你将内容从父组件投影到子组件中。这对于创建可以接受动态内容的可重用组件非常有用。它的工作原理如下：

基本用法

子组件：使用 ng-content 为投影内容定义一个占位符。

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

   @Component({
     selector: 'app-child',
     template: `
       
         
       
     `,
     styles: [`
       .child {
         border: 1px solid #ccc;
         padding: 10px;
       }
     `]
   })
   export class ChildComponent {}

父组件：使用子组件并将内容投影到其中。

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

   @Component({
     selector: 'app-parent',
     template: `
       
         This content is projected into the child component.
       
     `
   })
   export class ParentComponent {}

多个插槽

您还可以使用“select”属性定义多个内容投影槽。

子组件：定义多个具有选择属性的 ng-content 元素。

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

   @Component({
     selector: 'app-child',
     template: `
       
         
       
       
         
       
     `,
     styles: [`
       .header {
         background-color: #f1f1f1;
         padding: 10px;
       }
       .body {
         padding: 10px;
       }
     `]
   })
   export class ChildComponent {}

父组件：使用子组件并将内容投射到指定的插槽中。

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

   @Component({
     selector: 'app-parent',
     template: `
       
         
           Header Content
         
         Body Content
       
     `
   })
   export class ParentComponent {}

使用 ng-content 的好处

可重用性：创建可以接受不同内容的灵活且可重用的组件。

关注点分离：将组件逻辑与内容分离，使其更易于管理和维护。

动态内容：允许将动态内容注入到组件中，增强应用程序的灵活性。

感谢您的阅读！

希望您觉得这篇文章有用且信息丰富。如果您喜欢它或学到了新东西，请随时在评论中分享您的想法或与我联系。

如果您想支持我的工作并帮助我创作更多这样的内容，请考虑给我买杯咖啡。您的支持对我意义重大，并让我充满动力！

再次感谢您的光临！😊

CLIS.CC

角度： ng-content

基本用法

多个插槽

Header Content

使用 ng-content 的好处