我想在我的数据库中包含包含组件指令的 html,然后将其用作 Angular 中组件模板的一部分。
例如,如果我有:
<div [innerHTML]="injectMe"></div>
在 App 组件模板中,这在应用程序组件的代码中:
export class AppComponent {
injectMe = "<p>Paragraph</p> <app-injected></app-injected> ";
}
然后创建一个名为注入的组件:
模板:
<p> injected works! </p>
代码:
@Component({
selector: 'app-injected',
templateUrl: './injected.component.html',
styleUrls: ['./injected.component.css']
})
export class InjectedComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
我在控制台中收到“清理 HTML 删除了一些内容”的警告。在该链之后,我尝试添加一个调用以将字符串标记为安全使用:this.sanitizer.bypassSecurityTrustHtml
export class AppComponent {
injectHtml = "<p>Paragraph</p> <app-injected></app-injected> ";
injectMe: any;
constructor(private sanitizer: DomSanitizer){
this.injectMe = this.sanitizer.bypassSecurityTrustHtml(this.injectHtml);
}
}
这导致指令标签留在 HTML 中,没有控制台警告关于清理删除任何内容,但组件似乎没有被 Angular 处理。我看到您可以使用组件工厂来动态创建组件,但是,除非我想手动解析 HTML 以检查组件,否则我认为这对我的情况没有帮助。