解决方法如下所示:
import { Component, Input } from '@angular/core';
@Component({
selector: 'dynamic-html-template',
template: `
`,
})
export class DynamicHtmlTemplateComponent {
@Input() htmlTemplate: string;
}
import { Component } from '@angular/core';
@Component({
selector: 'parent-component',
template: `
`,
})
export class ParentComponent {
template: string = '{{ title }}
';
updateTemplate() {
this.template = '{{ title }}
{{ description }}
';
}
}
import { Component, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'parent-component',
template: `
`,
})
export class ParentComponent {
@Output() templateUpdate: EventEmitter = new EventEmitter();
template: string = '{{ title }}
';
updateTemplate() {
this.template = '{{ title }}
{{ description }}
';
this.templateUpdate.emit(this.template);
}
}
import { Component, Input } from '@angular/core';
@Component({
selector: 'dynamic-html-template',
template: `
`,
})
export class DynamicHtmlTemplateComponent {
@Input() htmlTemplate: string;
updateTemplate(template: string) {
this.htmlTemplate = template;
}
}
这个解决方法中,父组件通过事件发射器将更新后的模板传递给子组件,子组件监听父组件传递的事件,并在事件触发时更新自己的模板。
上一篇:Angular动态复选框过滤实现