InnerHTML 中的 Angular 指令

Question

我知道不可能在內部 html 內的 html 代碼中注入 angular 指令，有什么解決辦法嗎？ 我正在嘗試從 html 文件中讀取 html 和指令並將其注入到div ，我想過使用組件工廠並動態創建組件，但是 html 文件中的指令可以在代碼中的任何位置，不知道我是如何可以將它附加到 dom 中的正確位置，我在組件工廠方面沒有太多經驗，所以請告訴我是否有辦法。

ngOnInit(): void {

    let loading = this.loadingService.addTask();

    this.route.paramMap
        .take(1)
        .subscribe(params => {
            let page: string = params.get("page") || "";

            if (page) {
                this.trainingService.getPageContent(page)
                    .take(1)
                    .subscribe(res => {
                        this.content = res;
                        this.loadingService.completeTask(loading);
                    })
            }
            else {
                this.loadingService.completeTask(loading);
            }
        },
        error => {
            this.notificationService.error("Error retrieving training page", error);

            this.loadingService.clearAllTasks();
        })

這是我的模板

<div [innerHtml]="content"></div>

這是一個應該注入的 html 頁面示例（這是一個外部 html 頁面文件）

<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default b">
            <div class="panel-body">
                <div class="row">
                    <!--the directive-->
                    <sa-azure-media-player [source]="the link"></ss-azure-media-player>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

沒有辦法做到這一點。 解決方法是更改​​注入 html 的方式。 不要以 html 的形式注入，而是編寫一個子組件，為其提供正確的信息（作為 [json-] 對象！），然后就可以了。

如果您無法控制傳入的信息（在您的情況下為 html），您將被迫將其塑造成一個對象，以便您可以在 angular 中使用它。

在最近的一個項目中，我必須擁有可能包含 iframe 的文本內容（iframe 在 angular 中效果不佳）。 解決方案是將后端中的內容解析並保存為 JSON 對象，其中包含按正確順序的文本和 iframe 部分（不幸的是，這需要一些時間）。 一旦我在 Angular 中掌握了它，我就可以使用 typescript 注入 JSON 對象的文本和 iframe。 而且，當然，為正確的元素做正確的事情。

因此，如果您可以控制傳入的信息（無論是 html 還是任何類型的可識別對象），那么您應該更改程序（並充分利用 angular MVC 的東西）。 如果您對此沒有控制權，請提供更多關於需要做什么和具體情況的詳細信息。