innerHTML 值的 id 属性消失

Question

我正在尝试使用 innerHTML 设置 DOM-Element 的内容，但它没有像我预期的那样工作。我要设置的内容是一个带有 id 和 href 属性的标签，但是呈现的内容上没有 id 属性。

示例代码：

import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    template: `<div [innerHTML]="html"></div>`,
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'Angular';
    html = '<a href="/" id="foo">link</a>';
}

欢迎任何帮助。

Answer 1

您应该使用 bypassSecurityTrustHtml 方法告诉 angular 这个 html 可以安全使用。

      html = this.sanitizer.bypassSecurityTrustHtml('<a href="/" id="foo">link</a>');
      constructor(private sanitizer: DomSanitizer){}

Working Stackblitz

innerHTML 值的 id 属性消失

id Attribute of innerHTML value disappears

html

javascript

innerhtml

typescript

angular