With ng-content you can pass any elements to a component.
This simplifies creating reusable components.

@Component({
  selector: 'wrapper',
  template: `
    <div class="wrapper">
      <ng-content></ng-content>
    </div>
  `,
})
export class Wrapper {}

<wrapper>
  <h1>Hello World!</h1>
</wrapper>

file:app.component.ts

import { Component } from '@angular/core';

function template(useClass: string): string {
  return `
    <div class="${useClass}">
      <ng-content></ng-content>
    </div>
  `;
}

@Component({
  selector: 'app-card',
  template: template('card')
})
export class Card {}

@Component({
  selector: 'app-card-header',
  template: template('card-header')
})
export class CardHeader {}

@Component({
  selector: 'app-card-body',
  template: template('card-body')
})
export class CardBody {}

@Component({
  selector: 'my-app',
  template: `
    <app-card>
      <app-card-header>
        Header
      </app-card-header>
      <app-card-body>
        Body
      </app-card-body>
    </app-card>
  `
})
export class AppComponent {}

file:app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent, CardBody, CardHeader, Card } from './app.component';
import { FormsModule } from '@angular/forms';
@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent, CardBody, CardHeader, Card],
  bootstrap: [AppComponent]
})
export class AppModule {}

翻译自：https://www.30secondsofcode.org/angular/s/ng-content

相关链接

• https://medium.com/p/96a29d70d11b