góc 2: Render nội dung giữa các thẻ thành phần

Question

Khi một thành phần được trả lại, sau đó nội dung bên trong được bỏ qua, ví dụ

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

Sử dụng nó như

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

Render

<div>app works!</div> 

Nhưng tìm kiếm hộp thoại PrimeNg họ sử dụng các thành phần như thế này

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

Là "Nội dung tiêu đề ở đây", "Nội dung" và "Nội dung chân trang ở đây" là các thành phần bên trong, tại sao không bị bỏ qua và làm cách nào tôi có thể đạt được điều này?

Answer 1

Thêm <ng-content></ng-content> để mẫu của thành phần mà nội dung nên được dự kiến:

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

nội dung để được dự kiến:

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

Kết quả sẽ là:

app works! 
This is projected content! 

Đây là một bài viết tuyệt vời về Chiếu nội dung góc (Góc 1): Transclusion in Angular 2 with ng-content