其他组件中innerHtml中的字符串插值

Question

我有一个带字符串插值的变量：

<div class="ui-grid-cell-contents"><a href="core/upload/link/table/key/{{data.key}}" target="_blank">{{data.name}}</a></div>`

这个变量在父组件中，我需要它在子组件中，其中"；数据"；生成。

所以我只有：

<div [innerHTML]="$any(col.cellTemplate) | safeHtml"></div>

但它对｛｛｝｝不起作用。

谢谢。

Answer 1

从父级传递一个ng模板，然后需要使用上下文将变量传递到子级。

父代码

import { Component, VERSION } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
name = 'Angular ' + VERSION.major;
}

父html

<hello>
<ng-template #tpl let-data="data">
<div>{{ data | json }}</div>
</ng-template>
</hello>

子代码和html。

import { Component, ContentChild, Input } from '@angular/core';
@Component({
selector: 'hello',
template: `<div *ngFor="let person of data">
<ng-container *ngTemplateOutlet="tpl, context: {'data': data}">
</ng-container>
<span> {{person.name}}</span>
</div>`,
styles: [`h1 { font-family: Lato; }`],
})
export class HelloComponent {
@Input() stringParent: string;
@ContentChild('tpl') tpl;
data = [
{
name: 'Bob',
age: 35,
},
{
name: 'Mike',
age: 36,
},
];
}

堆叠式