問題描述

我使用如下代碼測試一個最簡單的 Angular 內容投影場景：

import { Component } from '@angular/core';@Component({selector: 'app-zippy-basic',template: `<h2>Single-slot content projection</h2><ng-container></ng-container>` }) export class ZippyBasicComponent {}

我期望 app-zippy-basic 的使用者，將傳入的 content，投射到元素 ng-container 內部。

消費代碼如下圖所示：

<app-zippy-basic><p>Is content projection cool?</p><div>ok</div> </app-zippy-basic>

然而運行時，我在渲染出的頁面里，根本看不到 Is content projection cool? 的顯示。

問題分析

打開 Chrome 開發者工具，發現 app-zippy-basic 內部只有一個 comment 節點：ng-container

我們在提供內容投影插槽的 Component 的 ng-container 之間隨便鍵入一些字符串，例如 DIV:

渲染后發現，ng-container 沒能按照我們期望的工作。

通過查閱 Angular 官網，發現這里把 ng-container 和 ng-content 弄混淆了。此處應該使用 ng-content.

解決方案

ng-content 之間不允許再插入其他元素。僅僅充當一個占位符的角色。

使用 ng-content 之后問題消失。這里我們可以通過單步調試的方式，搞清楚被投影的內容是如何插入到 ng-content 占位符里的。

選擇 app-zippy-basic，給其設置一個 dom 斷點，類型為 subtree modification：

首先執行 template 函數，將 Component 本身的 h2 元素，進行 HTML 源代碼的渲染：

接下來是 Angular 處理整個內容投影邏輯的關鍵：

遇到 ng-content，則調用函數 ??projection：

轉而調用 applyProjection：

parent node 即是指定義了 ng-content 的 Component 對應的 dom 元素：

rNode 即是被插入到 app-zippy-basic 中的節點，即 app-zippy-basic 的消費者。

消費語法：

<app-zippy-basic> 此處插入你想投影到 app-zippy-basic 內部的 HTML 源代碼 </app-zippy-basic>

總結

以上是生活随笔為你收集整理的Angular 内容投影 content projection 的一个问题的单步调试的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。