Angular компонент внутри angular компонент? ` `

Question

Я пробовал с ng-template и с ng-container, но я не могу понять, как включить компонент в компонент…

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


@Component({
  selector: 'hello',
  //  template: `<h1>Hello</h1><div>I am in a div<ng-container></ng-container>; now this is end</div>`,
  template: `<h1>Hello</h1><div>I am in a div<ng-template></ng-template>; now this is end</div>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {}


@Component({
  selector: 'intestines',
  template: 'Eww',
  styles: []
})
export class IntestinesComponent  {}


@Component({
  selector: 'my-app',
  template: `<hello><intestines></intestines></hello>`,
  styles: [ 'p { font-family: Lato; }' ]
})
export class AppComponent  {}

https://stackblitz.com/edit/angular-2b2yl3

Answer 1

Использование ng-content

@Component({
  selector: 'hello',
  template: `<h1>Hello</h1><div>I am in a div<ng-content></ng-content>; now this is end</div>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {}

Также отметьте эта статья может быть полезна для вас.