问题
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>
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">
instead of
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
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.
I'm new to Angular and trying to understand what is it that I am missing? Any help is highly appreciated.
回答1:
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 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
The bold in this quote is exactly what we need to do here in order to achieve this.
Here is a working example using the DOMSanitizer to bypass the sanitize process for your injected html.
The crux of the example is here:
// inject the DomSanitizer
constructor(private _sanitizer: DomSanitizer){}
// bypass the sanitizer
public get htmlProperty() : SafeHtml {
return this._sanitizer.bypassSecurityTrustHtml(this._htmlProperty);
}
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.
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.
回答2:
You can use [attr.data-parent]="'#bs-collapse_'+index" where index is a variable.
来源：https://stackoverflow.com/questions/49102210/bootstrap-accordion-example-not-working-with-angular-4-innerhtml