将内容投影到具有ng-content的组件中

在Angular中，有很多方法可以在我们的应用程序中传递数据。但是有时我们需要复杂的HTML /打字稿代码，这些代码需要从外部传递到组件中。因此，如果我们想要简化的代码并且不想在server-component.html中设置Html / typescript代码，那么我们可以在server-component标签的open和close元素之间(即，在‹app-server›‹∕app-server›标签)，并应相应地更改组件变量。

例子：

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

app-component.html

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

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

    
 
        

            {{element.type}}
        
             
    

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代码，因此它将被投影到服务器组件中。这是一个很好的功能，如果我们考虑构建可重用的小部件，这将是一个特殊功能。但是，如果它的HTML代码更复杂，那么属性绑定并不是真正的最佳解决方案，因为angular会在那里转义HTML文本，那么ng-content是拥有的绝佳工具。