Angular 5 - Bind a component selector with InnerHtml

问题

I have a component1 selector that I called "app-component1".

@Component({
   selector: 'app-component1',
   templateUrl: './test-widget.component.html',
   styleUrls: ['./test-widget.component.scss'] })

So to call the html of this component I usually use:

<app-component1></app-component1>

and it works perfectly fine.

Now from another component2 I have the following variable:

variableToBind = "<app-component1></app-component1>";

And In the html of component 2 I used the following:

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

The html code binding isn't working. Is is possible to help me understand why and maybe help me find another alternative?

回答1:

Angular sanitizes the HTML to prevent XSS attacks. You should find something like WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss). in your console output.

For further information, check out the documentation on property binding (esp. content security) and the security docs.

Depending on your use case, you need to choose another approach.

回答2:

Your example code is not a valid approach as

1) html code cannot be bound to element property directly for security reason. ref: https://angular.io/guide/security#xss

2) There is no need to do property binding for HTML in your case. If you want to perform different logic inside AppComponent2, the best practice is to do property binding for the parameters that can customise component behaviours:

<div>
    <app-component1 [prop1]="myVar1" [prop2]="myVar2"></app-component1>
</div>

and then you can customise it from the component properties instead of the component itself. This would make more sense.

回答3:

Thanks Everyone for the suggestions, I actually just find the answer to this:

This can't work because innerHtml is rendered AFTER Angular's compiled the templates. That means that it doesn't understand your selectors at this point of time.

If you guys want to load a component (or any content) dynamically, you should use *ngIf. It worked perfectly fine for me.

来源：https://stackoverflow.com/questions/48311330/angular-5-bind-a-component-selector-with-innerhtml

标签

html

angular

data-binding

innerhtml