Bootstrap 手风琴示例不适用于 Angular 4 [innerHTML]

Question

我正在尝试在我的 Angular 4 应用程序中实现 Bootstrap 手风琴示例。

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
        <h4 class="panel-title">
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                Collapsible Group Item #1
            </a>
        </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
        <div class="panel-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
    </div>
</div>
<div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
        <h4 class="panel-title">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                Collapsible Group Item #2
            </a>
        </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
        <div class="panel-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
    </div>
</div>
<div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
        <h4 class="panel-title">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                Collapsible Group Item #3
            </a>
        </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
        <div class="panel-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
    </div>
</div>

当我将此代码直接放入我的 html 文件时，它就像一个魅力，但是当我尝试在我的 html 文件中动态传递此代码作为 [innerHTML] 它不起作用。

我在开发工具中进行了检查，发现在后者的情况下，锚标记只有

<a class="collapsed" role="button" href="#collapseOne">

而不是

<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">

我也认为它与 ViewEncapsulation.None 无关，因为我已经尝试过了，但没有帮助。我也试过使用 @ng-bootstrap/ng-bootstrap.

我是 Angular 的新手，想了解我缺少的是什么？非常感谢任何帮助。

Answer 1

当您通过 [innerHtml] 或 [src] 等绑定手动将内容注入 DOM 时，默认情况下 angular 将尝试保护您的用户免受安全风险/Cross站点脚本安全漏洞

[The] DomSanitizer helps preventing Cross Site Scripting Security bugs (XSS) by sanitizing values to be safe to use in the different DOM contexts.

For example, when binding a URL in an hyperlink, someValue will be sanitized so that an attacker cannot inject e.g. a javascript: URL that would execute code on the website.

In specific situations, it might be necessary to disable sanitization, for example if the application genuinely needs to produce a javascript: style link with a dynamic value in it. Users can bypass security by constructing a value with one of the bypassSecurityTrust... methods, and then binding to that value from the template.

https://angular.io/api/platform-browser/DomSanitizer

这句话中的粗体正是我们为了实现这一目标需要做的。

这是一个 working example 使用 DOMSanitizer 来绕过注入的 html.

的消毒过程

这个例子的症结在这里：

// inject the DomSanitizer
constructor(private _sanitizer: DomSanitizer){}
// bypass the sanitizer 
public get htmlProperty() : SafeHtml {
   return this._sanitizer.bypassSecurityTrustHtml(this._htmlProperty);
}

其中 this._htmlProperty 是您在问题中作为字符串的 html 的大块。

注意：对于刚加入 angular 潮流的人来说，这是一个典型的问题。整个清理过程对于安全性来说非常重要，但这是我最不喜欢的 angular 功能，因为必须实施它总是很烦人。

附加说明： 考虑是否应将您的具体实现拆分成它自己的 component，然后可以稍后以类似的形式引用它：<app-bootstrap-accordion [data]="accordionData"></app-bootstrap-accordion> 其中 accordionData 是一个包含面板数据数组的对象，它将生成动态手风琴。

Answer 2

您可以使用 [attr.data-parent]="'#bs-collapse_'+index"，其中索引是一个变量。

Bootstrap 手风琴示例不适用于 Angular 4 [innerHTML]

Bootstrap Accordion example not working with Angular 4 [innerHTML]

innerhtml

twitter-bootstrap-3

angular