問題描述

我創(chuàng)建了一個 selector 為 app-content-section 的 Component，用于容納內(nèi)容投影(content projection)：

這個 Component 的模板區(qū)域，分別定義了三個 div 區(qū)域，里面包含了對應的內(nèi)容投影占位符 ng-content:

第一個綠色區(qū)域接收所有 div 標簽，第二個藍色區(qū)域接收所有包含了 css class content-class 的標簽，第三個區(qū)域接收所有 name 屬性值為 test 的標簽。

我們來看看消費這個 Component 的代碼：

<app-content-section><div name="test">div[name="test"]</div><div>純粹的 div 標簽</div><p #six class="content-class">p 標簽，包含 [class="content-class] 和 six id</p><p name="test">p 標簽 [name="test"]</p> </app-content-section>

• app-content-section 中包含兩個 div 元素，故最后的綠色區(qū)域里，包含了兩個 div 值：
  

藍色區(qū)域內(nèi)只顯示了一個 p 標簽，因為這是消費者傳入的元素里，唯一一個帶有 content-class 類的元素。

接下來的問題是，消費者傳入的元素里，第一個 div 元素和最后一個 p 元素的 name 屬性值都為 test，為什么只有最后一個 p 標簽，被投影到 app-content-section 里呢？

問題分析

第一個 div 標簽同時滿足第一條和第三條內(nèi)容投影規(guī)則，因此其被投影到第一個 ng-content 之后，就不會再重復被投影了。

我們可以做一個測試，把提供內(nèi)容投影場所的 Component 內(nèi)的第一個和第三個 ng-content 調(diào)換一下順序：

這次的測試結(jié)果，紅色區(qū)域出現(xiàn)的兩個元素，其 name 屬性值都為 test. 而雖然綠色區(qū)域容納的是被投射的 div 元素，但是因為 name = test 的 div 元素，已經(jīng)被優(yōu)先投射到紅色區(qū)域，所以它不會再被重復投射了。

總結(jié)

通過單步調(diào)試 Angular content projection 的相關代碼，也能確認上述邏輯。

當 Component 的模板文件被解析，遇到 ng-content 時：

觸發(fā) ??projection 函數(shù)。

applyProjectionRecursive 函數(shù)里的 nodeToProject，就是需要被投影的 DOM 節(jié)點：

可以看到這里只有包含了 name = test 屬性值的 div 被 Angular 框架解析成需要被投影的節(jié)點。

總結(jié)

以上是生活随笔為你收集整理的通过单步调试的方式学习 Angular 中带有选择器的内容投影使用方式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。