角度 6 - 发送包含引号的字符串到组件输入答案

【问题标题】：angular 6 - send string contains quotation marks to component input角度 6 - 发送包含引号的字符串到组件输入
【发布时间】：2018-10-02 08:51:58
【问题描述】：

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

@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>

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

有什么想法吗？

【问题讨论】：

标签： angular

【解决方案1】：

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

考虑阅读this answer，了解如何将 HTML 清理为标记以正确转义字符。

【讨论】：

【解决方案2】：

在component.ts中

public text: string = 'abc\"d';

在component.html中

<my-component [text]="text"></my-component>

【讨论】：

【解决方案3】：

我相信这会解决问题

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

【讨论】：

【解决方案4】：

试试这个

 <abcComponent [text]="'abc &quot; d'"></abcComponent>

【讨论】：