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

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

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

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

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

我希望这对你有帮助。干杯!