创建可插入其他组件的组件

Question

我正在构建一个Angular 5“shell”模块，我将用它来“包装”其他应用程序。它将提供页眉，页脚，侧边栏以及另一个应用程序可以插入其内容的区域。我已完成标题/侧边栏，但我不确定如何提供另一个应用程序将插入其内容的区域。此模块将导出其他应用程序可能使用的shell组件。我希望能够将此模块导入另一个Angular应用程序，并执行以下操作：

<shell>
  <router-outlet></router-outlet>
</shell>

这可能吗？如果是这样，我该如何做到这一点？做这样的事情也是正确的方法吗？

Answer 1

你的shell.component.ts需要看起来像这样

selector: 'shell',
templateUrl: `<div id="shell"> 
   <ng-content></ng-content> 
</div>`

在你的HTML中。现在你要在shell之间添加的所有东西都将被替换为