0

所以我正在开发一个使用包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>

stackblitz 上有一个演示，您可以在其中自己尝试（第 67 或 70 行component.ts）。

编辑

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

在此处输入图像描述

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

4

2 回答 2

0

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

@Component({
  encapsulation: ViewEncapsulation.None,
  ...
})
于 2020-04-10T06:18:42.560 回答
0

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

更多：Angular 2：清理 HTML 删除了一些带有 div id 的内容 - 这是错误还是功能？

对于正确（和安全）的解决方案。

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);
}
于 2021-07-06T15:28:07.753 回答