将带有html标记的字符串从父级传递给子级

Question

我正在尝试将一个字符串从我的父组件传递到我的子组件。该字符串包含带有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"

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

Answer 1

试试这样：

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

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

如果您在html元素中使用i18n-componentContent="this is a test|for testing"而Child Component获取my test。所以从html元素i18n-componentContent="this is a test|for testing"中删除它，然后你可以将完整的字符串传递给子组件

Answer 2

这不是一个有效的字符串，你需要转义html

componentContent='my test<sup>®</sup>not working'>

Answer 3

我猜，在将字符串从父级传递给子级之前，您正在将html标记转换为html实体，并且它正在生成格式错误的字符串。

相反，您可以执行以下操作：

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