javascript - 如何在 Angular.js 中使用嵌套模板?

标签 javascript angular

我有根选择器:

<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

最佳答案

我很确定您的 HTML 无效。

.

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

关于javascript - 如何在 Angular.js 中使用嵌套模板?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35857099/

相关文章:

javascript - 在 UIWebView 的 div 中找到光标位置的 y 坐标

javascript - CSS/JS) 在屏幕右侧移动视口(viewport)

javascript - 获取查询字符串到 js/jquery

javascript - 下载作为二进制/八位字节流的 PNG 文件

angular - 将 ngModel 模板引用变量作为 AbstractControl 传递给输入变量

javascript - 如何设置高度,或允许 div 延伸到绝对位置元素的高度?

angular - 如何在 Angular 6 中用 spy 对象替换组件范围的服务?

angular - ionic : Item with title and detail text

angular - 使用 queryParams 重定向到 url

javascript - 如何在不在新标签页中打开图片的情况下点击 anchor 标签下载图片文件?