Question

我有根选择器：

<body>
    <my-app>
        Loading...
    </my-app>
</body>

在他装载模板的组件中：

@Component({
    selector: 'my-app',
    template: `
               <p>It is nested content:</p>
               <div class="content">
                   <nested-selector></nested-selector> 
               </div>`
})

现在我要在nested-selector中下载内容：

@Component({
    selector: 'nested-selector',
    template: `<p>{{content}}</p>`
})

export class Mycomponent{
   public content = "qwerty12345";
}

结果，最后附加一个字符串：

<nested-selector _ngcontent-rbv-2="">qwerty12345</nested-selector>

结果，我们得到以下页面：

<body>
    <my-app>
        <p>It is nested content:</p>
        <div class="content">
           <nested-selector></nested-selector> 
        </div>
      <nested-selector _ngcontent-rbv-2="">qwerty12345</nested-selector>
    </my-app>
</body>

虽然页面应如下所示：

<body>
    <my-app>
        <p>It is nested content:</p>
        <div class="content">
           <nested-selector>qwerty12345</nested-selector> 
        </div>
    </my-app>
</body>

为什么会这样？为什么他要创建一个新选择器？如何让它正常工作？

修改我附上了主项目文件，以揭示问题的本质： https://plnkr.co/edit/DsDpXG72bjpyaWfPc1S0?p=preview

Answer 1

我很确定您的HTML无效。

.

I tried to reproduce in this Plunker但它显示了所需的行为。

如何在Angular.js中使用嵌套模板？

1 个答案: