Angular-日历标签不允许 HTML 标签中 href 以外的属性

Question

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

我基本上是在尝试向一个元素添加多个属性（在下面的代码中由标签表示），但是 none 似乎有效，但 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 有关。无论哪种方式，我的问题都保持不变：我该如何解决？

Answer 1

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

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

Answer 2

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

Angular-日历标签不允许 HTML 标签中 href 以外的属性

Angular-calendar label doesn't allow attributes in HTML label other than href

html

calendar

angular

angular-calendar

angular9