구성 요소 태그 간에 내용 렌더링

구성 요소 태그 간에 내용 렌더링

구성요소가 렌더링될 때 다음과 같이 구성요소 내부의 내용은 무시됩니다.

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: '<div>{{title}}</div>',
})
export class AppComponent {
  title = 'app works!';
}

사용 방법:

<app-root>Ignored content</app-root>

렌더링:

<div>app works!</div>

그러나 PrimeNg 대화상자를 보면 다음과 같은 구성요소를 사용합니다.

<p-dialog [(visible)]="display">
    <p-header>
        Header content here
    </p-header>
    Content
    <p-footer>
        Footer content here
   </p-footer>
</p-dialog>

~하듯이Header content here,Content그리고.Footer content here구성 요소 내부에 있습니다. 왜 무시되지 않습니까? 그리고 어떻게 하면 이를 달성할 수 있을까요?

더하다<ng-content></ng-content>컨텐츠를 투영해야 하는 구성 요소의 템플릿:

@Component({
  selector: 'app-demo',
  template: '<div>{{title}}</div>
             <br>
             <ng-content></ng-content>',
})
export class DemoComponent {
  title = 'Works!';
}

투영할 내용:

<app-demo>This is projected content!</app-demo>

출력은 다음과 같습니다.

Works!
This is projected content!

다음은 Angular Content Projection(Angular 1 Transclusion)에 대한 훌륭한 기사입니다.ng-content를 갖는 Angular 2에서의 트랜스클루전

언급URL : https://stackoverflow.com/questions/42355236/render-content-between-the-component-tags