String interpolation inside innerHTML in angular 2

问题

How can I render an expression inside an [innerHTML] directive:

public stringInterpolation: string = 'title';
public data: any = '<a>{{stringInterpolation}}</a>';

<div [innerHTML]="data"></div>

String interpolation is being rendered as text not the exact value.

Logic behind this is I am using a reusable table and I want a configuration where in I can specify a template that will be generated inside a cell rather than listing all data as text.

回答1:

You can use TypeScript interpolation. Angular bindings aren't supported in dynamically added HTML:

public data: any = `<a>${stringInterpolation}</a>`;

回答2:

You can't do this, if you have to inject different templates inside an html tag. You have to create one component for each template you need, and load components dynamically.

To load component at runtime, see this: How can I use/create dynamic template to compile dynamic Component with Angular 2.0?

来源：https://stackoverflow.com/questions/42780643/string-interpolation-inside-innerhtml-in-angular-2