Angular 中的 ng 内容

当我们想在组件中动态插入内容时，使用 ng-content 有助于提高组件的可重用性。使用 ng-content 我们可以在组件选择器中传递内容，并且当 Angular 解析出现在 ng-content 位置的内容时。

句法：

方法：

• 创建一个要使用的 Angular 应用程序。
• 使用命令“ng gc geek”创建一个组件“geek”。
• 然后我们在 app 组件中使用这个组件，并在“geek”组件中提供 ng-content。
• 使用 ng-content 我们在极客组件中传递了两件事，首先是人员位置，其次是经验年限。

例子：

app.component.html

    Senior Developer
    Experience : 5 years


  

    Application Developer
    Experience : 2 years

极客组件.html

    Hello, I am 
    

  

    

当我们需要在组件选择器中传递多个东西时，我们必须为它们提供任何 id 或类的唯一选择器，以便使用该唯一选择器我们可以访问 ng-content 中的特定内容。所以这里 ng-content 中的“select”用于获取匹配类名 app 或 app1 的内容。

输出：使用“ng serve”命令运行它，然后转到浏览器并打开“localhost:4200”。