angular 6 - 发送字符串包含对组件输入的引号

Question

我有一个带有字符串输入的组件：

@Component({
   selector: 'abcComponent'
   template: `
      <div>
      ....
      </div>`
})
export class AbcComponent {
   @Input() text:string;
}

我想向组件发送一个包含引号的字符串（例如：abc"d）：

   selector: 'parentComponent'
   template: `
      <div>
         <abcComponent [text]="'abc"d'"></abcComponent>
      </div>`
})

我也试过这个：

<abcComponent [text]="'abc\"d'"></abcComponent>

但在这两种情况下，我都会收到模板解析错误。

任何的想法？

Answer 1

我发现做到这一点的方法是清理你的属性值。不要使用<abcComponent [text]="'abc"d'"></abcComponent>，而是使用<abcComponent [text]="'abc&quot;d'"></abcComponent>，因为这"是引号的“净化值”。

考虑阅读这个关于如何将 HTML 清理为标记以正确转义字符的答案。