Angular-calendar 标签不允许 HTML 标签中的属性，而不是 href答案

【问题标题】：Angular-calendar label doesn't allow attributes in HTML label other than hrefAngular-calendar 标签不允许 HTML 标签中的属性，而不是 href
【发布时间】：2020-07-07 23:09:43
【问题描述】：

所以我正在开发一个使用包 angular-calendar 来显示日历的应用程序，但它似乎遇到了一种奇怪的行为，我看不到我做错了什么。

我基本上是在尝试向一个元素添加多个属性（在下面的代码中由标签表示），但除了 href 之外似乎没有任何作用。

这是我的代码

      eAction = {
        label: `<a id='subscribe' style='margin: 10px;' href='${"/heroes/"}${hero.id}'>See hero</a>`,
        a11yLabel: "...",
        onClick: ...
      }

我尝试过的其他事情：

只有id 属性不会，不会在 html 中显示该属性。
切换属性位置似乎没有影响。
为 ` 切换 " 也无济于事：<a id=${"Hello"} href='test'>Hello</a> 在生成的 HTML 中仍显示为 <a href="test">Hello</a>。<a id="Hello" href='test'>Hello</a> 和 <a id='Hello' href='test'>Hello</a> 的情况相同

There's a demo on stackblitz where you can try this yourself（component.ts 中的第 67 或 70 行）。

编辑

我在控制台中注意到与此确切部分相关的警告。

所以也许它与XSS 有关。无论哪种方式，我的问题都保持不变：我该如何解决？

【问题讨论】：

标签： html angular calendar angular9 angular-calendar

【解决方案1】：

这是因为 id 和 name 属性不安全。

为了正确（和安全）的解决方案。

HTML

eAction = {
        label: `<a id='subscribe' style='margin: 10px;' [href]='getActionLink()'>See hero</a>`,
        a11yLabel: "...",
        onClick: ...
      }

打字稿

import { DomSanitizer } from '@angular/platform-browser';

constructor(private _sanitilize: :DomSanitizer){...}

getActionLink(): string{
   return this._sanitilize.bypassSecurityTrustHtml("/heroes/" + this.hero.id);
}

【讨论】：

【解决方案2】：

将encapsulation: ViewEncapsulation.None 从@angular/core 添加到我的组件修复了它。

@Component({
  encapsulation: ViewEncapsulation.None,
  ...
})

【讨论】：