Angular Библиотека, использующая HTML компонента приложения

Question

Я реализую свою первую библиотеку angular.

Я хочу создать библиотеку верхнего и нижнего колонтитула для angular. Проблема в том, что он должен иметь html приложения, в котором он используется. Ниже вы можете найти эскиз кода HTML, которого я хочу достичь.

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

pageContent.component должно исходить из приложения, в которое встроена библиотека. Как мне этого добиться?

РЕДАКТИРОВАТЬ:

Я пытаюсь уточнить подробнее:

В моей библиотеке angular у меня есть компонент, который должен иметь заголовок и нижний колонтитул Кроме того, он должен показывать основное содержание страницы. Следовательно, для библиотеки необходим ввод pageContent.component. Как мне этого добиться?

Answer 1

Спасибо за добавление более подробной информации. Взгляните на этот демонстрационный код для справки

Как видите, я использовал ng-content в canvas.component.html, как показано ниже:

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

Холст Компонент содержит header и footer, как вы хотели. Я поместил некоторые маршруты в этом примере, чтобы сделать его ближе к тому, что вы ищете.

Надеюсь, это помогло вам. Ура!

Answer 2

Для этого вы можете использовать контент-проекцию. Вы можете попробовать эту ссылку для получения дополнительной информации. контент-проекция