Angular：与具有满足感的父母的孩子结合

Question

我试图用一些span s制作一个段落，我的内容是。使用span的原因是用户可以使用自己的样式自定义段落的任何部分。

但如果我将contenteditable设置为父级，则所有孩子都会停止回答事件，例如input，onkey等。

如果我将contenteditable设置为每个span但是将其从父级中移除，则绑定到span就像一个魅力，但它不允许用户进行跨跨选择和编辑。

那么如何将contenteditable设置为父级并在跨度中保存我的绑定？或者，如果不可能，我怎样才能让孩子span，用户点击并立即编辑？

我希望，我的问题很清楚:)下面你可以看到我的代码，这不符合我的预期。

模板：

<p contenteditable>
    <span *ngFor="let text of text_blocks" [innerText]="text.content" (input)="text.content=$event.target.innerText"></span>
</p>

素：

{
    "text_blocks" : [
        {
            "id" : 1,
            "content" : "Lorem Ipsum"
        },
        {
            "id" : 2,
            "content" : " is simply dummy text of the printing and typesetting industry. "
        },
        {
            "id" : 3,
            "content" : "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to "
        },
        {
            "id" : 4,
            "content" : "a type specimen book. "
        },
        {
            "id" : 5,
            "content" : "It has survived not only five centuries, but also the leap into electronic typesetting, "
        },
        {
            "id" : 6,
            "content" : "remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing "
        },
        {
            "id" : 7,
            "content" : "Lorem Ipsum"
        },
        {
            "id" : 8,
            "content" : " passages, and more recently with desktop publishing software like"
        },
        {
            "id" : 9,
            "content" : " Aldus PageMaker "
        },
        {
            "id" : 10,
            "content" : "including versions of Lorem Ipsum."
        }
    ]
}