angular - 从 SafeValue 访问 @ContentChildren

Question

我有一个简单的组件:

@Component({
  selector: '[group_id]'
})
export class ItemComponent {}

我还有一个组件，我尝试获取作为内容传递给该组件的所有子 ItemComponent。

@Component({
    selector    : 'selector',
    template    : '<ng-content></ng-content>',
})
export class SelectorComponent implements AfterContentInit {
    @ContentChildren(ItemComponent) items;

    ngAfterContentInit() {
        console.log (this.items);
    }
}

现在我在应用程序中的某个位置使用我的 SelectorComponent:

<selector>
    <div [innerHTML]="'<p group_id>A</p>' | safeHtml"></div>

    <p group_id>B</p>
    <p group_id>C</p>
    <p group_id>D</p>
</selector>

在 SelectorComponent 的 ngAfterContentInit 钩子(Hook)中仅获得 3 个结果(B、C、D 元素)。如果元素 A 是 SafeValue，我如何访问它？

有什么方法可以跳过要求SafeValue必须使用[property]=binding(XSS保护)？是否有其他方法来访问该组件(我对访问 DOM 元素不感兴趣，而是获取组件引用)。

Answer 1

Angular 不知道使用 [innerHTML] 添加的内容或在运行时动态添加的其他 HTML。 Angular 在应用程序构建时、部署之前编译模板，并忽略运行时添加的所有 HTML。

您可以强制执行

constructor(private elRef:ElementRef) {}

ngAfterContentInit() {
  this.elRef.nativeElement.querySelector(...)
}

或者加载动态平台来编译组件 atr untime，如 How can I use/create dynamic template to compile dynamic Component with Angular 2.0? 中所述。