Angular 库使用 HTML 的应用程序组件

Question

我正在实施我的第一个 angular 库。

我想为 angular 实现页眉和页脚库。问题是，它应该有它所使用的应用程序的 html。下面你可以找到我想要实现的 HTML 代码的草图。

//some header
<pageContent>
</pageContent>
//some footer

pageContent.component 应该来自嵌入库的应用程序。 我该如何实现？

编辑：

我正在尝试详细说明：

在我的 angular 库中，我有一个组件，它应该有页眉和页脚。此外，它应该显示页面的主要内容。因此，图书馆需要pageContent.component的输入。我该如何实现？

Answer 1

感谢您添加更多详细信息。 Take a look at this demo code for reference

如您所见，我在 canvas.component.html 中使用了 ng-content，如下所示：

<div id='border'>
   <h3>header</h3>
    <ng-content>
      <!-- Dynamic content goes here -->
    </ng-content>
    <h3>footer</h3>
</div>

canvas 组件包含您想要的 header 和 footer。我在此示例中放置了一些路由，以使其更接近您要查找的内容。

希望对您有所帮助。干杯！