Chiếu nội dung trong Angular với nội dung ng

---

AngularJS có tính năng chuyển đổi và Angular có thể chiếu nội dung bằng cách sử dụng <ng-content> </ng-content> .

Bài đăng này bao gồm Angular 2 trở lên.

Giả sử bạn có một thành phần gia đình với trình trang trí giống như sau:

@Component({
  selector: 'home',
  template: `
    <h1>Heroic Title</h1>
    <p>Something good...</p>
  `
})

Và giả sử bạn muốn có thể làm điều gì đó như thế này khi bao gồm thành phần:

<home>
  <p>Something else</p>
</home>

Sau đó, những gì bạn sẽ làm là sử dụng <ng-content> </ng-content> như thế này trong mẫu thành phần của bạn:

@Component({
  selector: 'home',
  template: `
    <h1>Heroic Title</h1>
    <p>Something good...</p>
    <ng-content></ng-content>
  `
})

Kết quả sau đó sẽ như sau:

<h1>Heroic Title</h1>
<p>Something good...</p>
<p>Something else</p>

Và với điều này, bạn cũng có thể đặt các thành phần bên trong thành phần shell bọc của bạn . Đây là cách bạn, ví dụ, chiếu thành phần myNav bên trong thành phần home :

<home>
  <myNav></myNav>
</home>

---

Bạn cũng có thể sử dụng select trên ng-content để xác định nội dung cần được đưa vào. Trong ví dụ này, chỉ các phần tử div sẽ được bao gồm:

@Component({
  selector: 'home',
  template: `
    <h1>Heroic Title</h1>
    <p>Something good...</p>
    <ng-content select="div">
    </ng-content>
  `
})

Và bạn có thể sử dụng cú pháp [attr] để chỉ chọn các phần tử có thuộc tính cụ thể. Trong ví dụ sau, chỉ những thứ như <p intro>… </p> mới được đưa vào:

@Component({
  selector: 'home',
  template: `
    <h1>Heroic Title</h1>
    <p>Something good...</p>
    <ng-content select="[intro]">
    </ng-content>
  `
})

---

---

Các tin liên quan