[innerHTML] 内的 Angular 嵌套属性绑定答案

【问题标题】：Angular nested property binding inside [innerHTML][innerHTML] 内的 Angular 嵌套属性绑定
【发布时间】：2021-11-08 20:53:57
【问题描述】：

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

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);
    }
}

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

【问题讨论】：

嘿 Tomas，innerHtml 的内容没有被 angular 解析。有一些方法可以动态解析 html 以进行绑定，但它非常复杂且非常繁重（您必须在构建时附带编译器）。
好的，这就是我正在寻找的答案。对我来说不幸的是，这真的很繁重......谢谢@MikeOne

标签： javascript html angular typescript

【解决方案1】：

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

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

Working example

【讨论】：

哦，我想我表达的不是很清楚。这个想法是，该 URL 实际上是一个变量，而不是纯字符串，因此解析它并提供绑定将是一种非常理想的方式。无论如何，我做了我的研究，它需要运行时组件编译，所以......好吧，我会告诉我的管理层这是不可能的：D

【解决方案2】：

不要使用 href 作为 Angular 输入属性，因为 Angular 不会解析它。请直接使用href，比如href=‘/url’

【讨论】：