用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就是一个很好的工具了。