Angular 组件在 angular 组件内？ `<comp0><comp1></comp1></comp0>`

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  {}

另请检查 this article 可能对您有用。

Angular 组件在 angular 组件内？ `<comp0><comp1></comp1></comp0>`

Angular component inside angular component? `<comp0><comp1></comp1></comp0>`

angular-template

angular-components

angular