简单的 ng-content 在 angular 2 中不起作用

Question

我尝试嵌入内容。我有以下组件标记：

<body>
    <bn-menu>
      <span>test</span>
      <p>I am content</p>
    </bn-menu>
  </body>

以及以下组件：

import { Component } from '@angular/core';
@Component({
  selector: 'bn-menu',
  template: '<div><div>Jo</div><ng-content></ng-content></div>'
})
export class MenuComponent { }

但只显示 "Jo" 而不是 "test" 或 "I am content"。我做错了什么？

Answer 1

您似乎在尝试显示 Root 组件中的内容，Root 组件中的内容通常用于显示 angular 启动时使用的内容。

如果您可以将 bn-menu 包裹在其他根组件中，它应该可以工作。

检查这个 SO 问题

简单的 ng-content 在 angular 2 中不起作用

simple ng-content not working in angular 2

angular2-components

angular