Bootstrap Accordion示例不适用于Angular 4 [innerHTML] [英] Bootstrap Accordion example not working with Angular 4 [innerHTML]
问题描述
我正在尝试在 Angular 4 应用程序中实现 Bootstrap Accordion示例.
I'm trying to implement the Bootstrap Accordion example in my Angular 4 app.
<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文件中时，它就像一种魅力，但是当我尝试以 [innerHTML] 在我的html文件中动态传递此代码时，它不起作用.
It works like a charm when I put this code in my html file directly but when i try to pass this code dynamically in my html file as [innerHTML] it doesn't work.
我在开发工具中进行了检查，发现在后者的情况下，锚标记仅具有
I've inspected in dev tools and found that in the case of the latter the anchor tag only has
<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 .
I also think that it has got nothing to do with ViewEncapsulation.None as I've tried that and it doesn't help. I've also tried used @ng-bootstrap/ng-bootstrap.
我是Angular的新手，试图了解我缺少的是什么?任何帮助都将受到高度赞赏.
I'm new to Angular and trying to understand what is it that I am missing? Any help is highly appreciated.
推荐答案
通过诸如 [innerHtml] 或 [src] 之类的绑定将内容手动注入DOM时默认情况下，angular会尝试保护您的用户免受安全风险/跨站点脚本安全错误
When you manually inject content into the DOM via bindings such as [innerHtml] or [src] by default angular will try to protect your users from security risks / Cross Site Scripting Security Bugs
[The] DomSanitizer通过清除值以确保可以在不同的DOM上下文中安全使用来帮助防止跨站点脚本安全性漏洞(XSS).
[The] DomSanitizer helps preventing Cross Site Scripting Security bugs (XSS) by sanitizing values to be safe to use in the different DOM contexts.
例如，当在超链接中绑定URL时，将清除someValue，以使攻击者无法注入例如一个javascript:将在网站上执行代码的URL.
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.
在特定情况下，可能有必要禁用清理，例如，如果应用程序确实需要生成其中具有动态值的javascript:样式链接.用户可以通过使用bypassSecurityTrust ...方法之一构造一个值，然后从模板绑定到该值来绕过安全性.
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
此报价中的粗体字正是我们为了实现这一点所需要做的.
The bold in this quote is exactly what we need to do here in order to achieve this.
这是工作示例，使用DOMSanitizer绕过您注入的html的清理过程.
Here is a working example using the DOMSanitizer to bypass the sanitize process for your injected html.
示例的症结所在:
// inject the DomSanitizer
constructor(private _sanitizer: DomSanitizer){}
// bypass the sanitizer
public get htmlProperty() : SafeHtml {
return this._sanitizer.bypassSecurityTrustHtml(this._htmlProperty);
}
this._htmlProperty 是您在问题中以字符串形式出现的大量html代码.
Where this._htmlPropertyis the massive chunk of html you have in your question as a string.
注意:这是那些刚开始使用棱角分明的潮流的人的经典陷阱.整个消毒过程非常安全，但是我最不喜欢的角度特征是必须执行此操作，这总是烦人的事情.
Note: This is a classic gotcha for people whom are just getting on the angular bandwagon. The whole sanitizing process is great for security but is my least favourite angular feature as it is a constant annoyance to have to implement this.
其他说明:请考虑是否应将您的特定实现拆分为自己的 component ，以后可以以类似以下形式的形式引用它:< app-bootstrap-accordion [data] ="accordionData"></app-bootstrap-accordion> 其中 accordionData 是一个对象，其中包含说将要生成的一组面板数据动态的手风琴.
Additional Note: Consider if your specific implementation should be split out into it's own component which can then be referenced later in the shape of something like: <app-bootstrap-accordion [data]="accordionData"></app-bootstrap-accordion> where accordionData is an object containing say an array of panel data which will generate a dynamic accordion.
这篇关于Bootstrap Accordion示例不适用于Angular 4 [innerHTML]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
