javascript - [innerHTML] 内的 Angular 嵌套属性绑定

Question

我正在向页面动态添加内容，让我们考虑以下示例：

const dataArray = [
  {id: 1, innerHtml: `Some plain Txt`},
  {id: 2, innerHtml: `Some plain Txt`},
  {id: 3, innerHtml: `Some plain Txt`},
]

在组件模板内部：

<div *ngFor="let e of dataArray">
 <p [innerHTML]="e.innerHtml"></p>
</div>

一切正常，直到我需要一些嵌套的属性绑定，如下所示：

...
  {id: 2, innerHtml = `Some plain Txt with anchor: <a [href]="'most/plain/url/link'" >Link</a>`},
...

我通过安全旁路管道传递值：

@Pipe({name: 'safeHtml'})
export class Safe implements PipeTransform {
    constructor(private sanitizer: DomSanitizer){}

    transform(style) {
        return this.sanitizer.bypassSecurityTrustHtml(style);
    }
}

但总是导致：标签的空href属性，a当不使用安全旁路管道或它的非插值，复制粘贴版本（例如<a [href]="'non/interpolated'"></a>）

标签： javascripthtmlangulartypescript

Answer 1

<a>tag 是原生元素，所以不要将值作为属性绑定传递。而不是[href]="'most/plain/url/link'"仅仅做href='most/plain/url/link'.

innerHtml: `Some plain Txt with anchor: <a href='most/plain/url/link' >Link</a>`

工作示例