Angular中的ng-content

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

语法:

<ng-content select=”.app”></ng-content>

步骤:

• 创建一个要用的angular应用程序。
• 使用 “ng g c geek “命令创建一个组件 “geek”。
• 然后我们在App组件中使用这个组件，并在 “geek “组件中提供ng-content。
• 使用ng-content，我们在geek组件中传递两样东西，第一是人的职位，第二是经验的年份。

示例:

<app-geek>
    <strong class="app">Senior Developer</strong>
    <strong class="app1">Experience : 5 years</strong>
</app-geek>
<hr>
  
<app-geek>
    <strong class="app">Application Developer</strong>
    <strong class="app1">Experience : 2 years</strong>
</app-geek>

<h3>
    <span>Hello, I am </span>
    <ng-content select=".app"></ng-content>
</h3>
  
<h4>
    <ng-content select=".app1"></ng-content>
</h4>

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

输出：使用 “ng serve “命令运行这个，然后到浏览器中打开 “localhost:4200″。