內容投影是一種模式,你可以在其中插入或投影要在另一個組件中使用的內容。
簡單來說,angular的內容投影就相當于vue的內容插槽slot。所有一下就能懂了。
1、單插槽內容投影
單插槽內容投影是指創建一個組件,你可以在其中投影一個組件。如果只有一個ng-content,不需要select屬性。
2、多插槽內容投影
一個組件可以具有多個插槽。每個插槽可以指定一個 CSS 選擇器,該選擇器會決定將哪些內容放入該插槽。將 select
屬性添加到 "><ng-content>
元素。 Angular 使用的選擇器支持標簽名、屬性、CSS 類和 :not
偽類的任意組合。
<!-- app.component.html -->
<yu-panel><div class="head">Head</div><div