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

Question

I have root selector: 我有根选择器：

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

In him loaded component with template: 在他的组件加载模板：

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

Now I want to download the content in nested-selector : 现在，我想在nested-selector下载内容：

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

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

As a result, appended in the end an string: 结果，在字符串末尾附加：

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

As a result, we get the following page: 结果，我们得到以下页面：

<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>

Although page should look like this: 尽管页面看起来应该像这样：

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

Why is this happening? 为什么会这样呢？ Why he creates a new selector? 为什么他创建一个新的选择器？ How to make it work properly? 如何使其正常工作？

EDIT: I attached the main project files to uncover the essence of the problem: https://plnkr.co/edit/DsDpXG72bjpyaWfPc1S0?p=preview 编辑：我附加主项目文件以发现问题的实质： https : //plnkr.co/edit/DsDpXG72bjpyaWfPc1S0?p=preview

Answer 1

I'm pretty sure you HTML is invalid. 我很确定您的HTML无效。

.

I tried to reproduce in this Plunker but it shows the desired behavior. 我尝试在此Plunker中重现，但它显示了所需的行为。

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

问题描述

1 个解决方案

解决方案1
1 2016-03-08 10:32:31

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

问题描述

1 个解决方案

解决方案1 1 2016-03-08 10:32:31

解决方案1
1 2016-03-08 10:32:31