使用 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'}

应用组件.html

    
 
         Element name rendered is {{ele.name}} 
         Element content rendered is {{ele.content}}
    

ng-内容：
有一个特殊的指令（ ‹ng-content›‹∕ng-content› ）需要添加到 server-component.html 模板中，在我们想要呈现内容的地方。它充当您放置在组件中的钩子，以标记组件的位置，它应该在开始和结束标记之间添加它找到的任何内容。
服务器组件.html

    
 
        

            {{element.type}}
        
             
    

服务器元素：

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