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

I found the way to do this is to sanitize your attribute value. Instead of using <abcComponent [text]="'abc"d'"></abcComponent>, use <abcComponent [text]="'abc"d'"></abcComponent>, as " is the "sanitized value" for the quotation marks.

Consider reading this answer on how to sanitize HTML into tokens to properly escape characters.

Answer 2

我确定这可以解决问题

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

Answer 3

In component.ts

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

In component.html

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

Answer 4

Try this

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

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

4 个答案: