# 問題描述

本文涉及到的程式碼位置：https://github.com/wangzixi-diablo/ngDynamic

我有一個能接受內容投影的 Angular Component：

![](https://img-blog.csdnimg.cn/img_convert/5cff65145d5fc50028e2e38ce8f50fd6.png)

使用如下程式碼消費這個 Component：

![](https://img-blog.csdnimg.cn/img_convert/c61c8adc44c91a1a0674c9c6c0f6f979.png)

但是遇到執行時錯誤，如下圖所示。
點選 `template.html:7:3`:

![](https://img-blog.csdnimg.cn/img_convert/4611a3d36d3034dbd5cef94428560ae2.png)
![](https://img-blog.csdnimg.cn/img_convert/bb9b8efe6055a83f740d5008c83618a3.png)

# 問題分析

丟擲該錯誤訊息的函式實現：

```typescript
/**
 * Returns the value associated to the given token from the NodeInjectors => ModuleInjector.
 *
 * Look for the injector providing the token by walking up the node injector tree and then
 * the module injector tree.
 *
 * This function patches `token` with `__NG_ELEMENT_ID__` which contains the id for the bloom
 * filter. Negative values are reserved for special objects.
 *   - `-1` is reserved for injecting `Injector` (implemented by `NodeInjector`)
 *
 * @param tNode The Node where the search for the injector should start
 * @param lView The `LView` that contains the `tNode`
 * @param token The token to look for
 * @param flags Injection flags
 * @param notFoundValue The value to return when the injection flags is `InjectFlags.Optional`
 * @returns the value from the injector, `null` when not found, or `notFoundValue` if provided
 */
function getOrCreateInjectable(tNode, lView, token, flags = InjectFlags.Default, notFoundValue)
```

第一個輸入引數 `tnode` 就是 `p` 節點本身：

![](https://img-blog.csdnimg.cn/img_convert/8d3e06b95c15002911090900602db81f.png)

![](https://img-blog.csdnimg.cn/img_convert/503a1243ef2fd4b55f5acec96ed64d77.png)

token 指向 `TemplateRef`：

![](https://img-blog.csdnimg.cn/img_convert/3a573f5c9bb994659ec8e1cf5d672911.png)

# 解決方案

這個問題有幾種解決方案。

## 方案1

刪除 p 節點的自定義 Directive：
![](https://img-blog.csdnimg.cn/img_convert/c5ea3cd53598b9af52a396e92304a319.png)

然後新增一個預設的內容投影：
![](https://img-blog.csdnimg.cn/img_convert/6ee0c72c69bc239dd6542334a1ef8d84.png)

![](https://img-blog.csdnimg.cn/img_convert/7298a176b1469030880b43bab6ccdfde.png)

## 解決方案2

刪除自定義 Directive 建構函式里的 `TemplateRef` 依賴：
![](https://img-blog.csdnimg.cn/img_convert/c2640daede96411e7ad77512ee26a56b.png)

![](https://img-blog.csdnimg.cn/img_convert/d251df01ece8a115f98757deb293f922.png)

## 解決方案3

消費 zippy Component 時，直接傳入被投影的內容：
![](https://img-blog.csdnimg.cn/img_convert/e68111d839f689b7f12394c0add1db1b.png)

該內容會被投影到下圖第一行的 place holder：
![](https://img-blog.csdnimg.cn/img_convert/ebe1e8ae25982111e0428c47b1819a61.png)

![](https://img-blog.csdnimg.cn/img_convert/5d485ee3dc9a63fcf02d37172a191708.png)

## 解決方案4

消費 Component 時，透過 `ng-template` + `自定義 Directive` 的方式指定被投影的內容：

![](https://img-blog.csdnimg.cn/img_convert/9ca105d6f34a2f5a3c41a59f7cbc7a7d.png)

透過 `@ContentChild` conten query 拿到自定義 Directive 例項，進而拿到 Directive 指向的 `TemplateRef`：

![](https://img-blog.csdnimg.cn/img_convert/da7fba2385ee0f57b58f1c26c45f32a5.png)

![](https://img-blog.csdnimg.cn/img_convert/df549519406c0c16cdfac237f129d9d0.png)

# 總結

渲染樹是實際的 DOM 渲染樹。 它與 `Ivy` 的邏輯樹不同，渲染樹必須考慮內容投影。 因此渲染樹裡的父/子關係不像邏輯檢視中那樣簡單。

Angular 內容投影出現 No provider for TemplateRef found 錯誤的單步除錯

相關文章