从父项到子项传递带有html标记的字符串

我试图从父项组件向我的子项目组件传递一个字符串。该字符串包含html标签和一个html实体。这是在父模板的一个例子：从父项到子项传递带有html标记的字符串

<child-component i18n-componentContent="this is a test|for testing" componentContent='my test<sup>&reg;</sup>not working'></child-component>

的子组件方面，我有以下几点：

@Input() public componentContent: string; 

... 
     public ngOnInit() { 
      console.log(this.componentContent); 
     }

然而，

this.componentContent

是价值： "my test"

因此，并不是将整个字符串传递给子组件。为什么不是将整个字符串传递给子组件？我需要做什么才能将整个字符串从父项传递给子组件？

来源

2017-10-13 Sean12

请试试这样：

以下html元素有效传入子组件。

<child-component i18n componentContent='my test<sup>&reg;</sup>not working'></child-component>

如果您正在使用i18n-componentContent="this is a test|for testing" html元素里面和儿童Component获得my test。所以从html元素中移除i18n-componentContent="this is a test|for testing"然后你可以将完整的字符串传递给子组件

来源

2017-10-14 05:21:43 Chandru

感谢您的回应，但i18n-componentContent是必要的我传递给子组件的字符串本地化，它不应该与要传递的字符串有任何关系。 – Sean12

令人惊讶的是，删除i18n标签确实解决了问题，并且完整的字符串被传递给了子组件，但是我不能对字符串进行本地化，因为不再有i18n属性。这在我看来是Angular 4+模板引擎的一个缺陷。 – Sean12

这不是一个有效的字符串，你需要逃避HTML

componentContent='my test&lt;sup&gt;&reg;&lt;/sup&gt;not working'>

来源

2017-10-13 22:38:30

谢谢，但我已经试过了，我在子组件中得到的是：“my test \”，所以它在第一个反斜杠后截断。 – Sean12

转义HTML应该返回这样的，但是... –

我想，你要转换的HTML标记HTML实体从母体传递字符串到孩子之前，它是生产的错误格式化的字符串。

相反，你可以做到以下几点：

不要转换为HTML实体在父组件，并使用encodeURIComponent功能于父组件的字符串编码和子组件使用decodeURIComponent解码和后在子组件中执行转换为html实体。我希望这样，你可以避免这个问题。

来源

2017-10-13 23:19:58 asmmahmud

感谢您的响应，但使用encodeURIComponent会导致模板解析错误：'componentContent = encodeURIComponent（'我测试不工作'）' – Sean12

从父项到子项传递带有html标记的字符串

回答

相关问题