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

在Angular中，有很多方法可以在我们的应用程序中传递数据。但有时我们有复杂的HTML/typescript代码需要从外部传入组件。因此，如果我们想简化代码，不想在server-component.html中设置Html/typescript代码，那么我们可以在server-component标签的开头和结尾元素之间（即’app-server”∕app-server’标签之间）写下这段代码，并应相应改变组件的变量。

示例:

serverElement :
{type:'server', name:'some-name', content:'some-value'}

app-component.html

<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-1">
<app-server-element *ngFor=
         "let ele of serverElements" [element]="ele">
    <div class="card-text" 
        *ngIf="ele.type === 'server'" style="color: yellow;" > 
         Element name rendered is {{ele.name}} 
         Element content rendered is {{ele.content}}
    </div>
</app-server-element>
</div>
</div>
</div>

ng-content:
有一个特殊的指令（’ng-content”∕ng-content’）需要被添加到server-component.html模板中，在我们想要呈现内容的地方。它就像你放在组件中的一个钩子，为组件标记出它应该在打开和关闭标签之间添加任何内容的地方。
server-component.html

<div class="card">
    <div class="card-body"> 
        <h5 class="card-header text-uppercase">
            <strong>{{element.type}}</strong>
        </h5>
            <ng-content></ng-content> 
    </div>
</div>

serverElement :

{type:'server', name:'some-name', content:'some-value'}

app-component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
serverelements=[{type:'server', 
                name:"TestServer",
                comp:'Just a Test!'}];
onAddedServer(data: {servername: string, 
                     servercomponent: string}){
  this.serverelements.push({
    type:'server',
    name:data.servername,
    comp:data.servercomponent
  })
}

输出:

Element name rendered is "some-name"
Element content rendered is "some-value"

在这里，我们通过ng-content Hook添加了HTML代码，我们把它添加到开头和结尾标签之间，因此它将被投射到服务器组件中。这是一个很好的功能，如果我们考虑到建立可重复使用的小部件，这是很特别的。但如果是比较复杂的Html代码，那么属性绑定就不是真正的最佳解决方案，因为angular会在那里转义HTML文本，那么ng-content就是一个很好的工具了。