Для сборки библиотеки Angular с рекурсивными компонентами в Angular 12, вам потребуется выполнить несколько шагов.
1. Создайте новый проект библиотеки, используя Angular CLI командой:
ng new my-library --create-application=false
2. Перейдите в каталог созданного проекта библиотеки:
cd my-library
3. Создайте новый модуль библиотеки:
ng generate module my-library --module=app --project=my-library
В этой команде мы создаем модуль с именем "my-library" и добавляем его в главный модуль вашего приложения, указывая --module=app --project=my-library.
4. Создайте компонент библиотеки:
ng generate component my-component --project=my-library
В этой команде мы создаем компонент с именем "my-component" внутри проекта "my-library".
5. Создайте файл public-api в каталоге проекта библиотеки. В этом файле вы будете экспортировать все необходимые компоненты, модули, сервисы и т.д., которые вы хотите сделать доступными извне библиотеки.
6. В файле my-component.component.ts добавьте декоратор @Input() component: any;, чтобы вы могли передавать компоненты рекурсивно.
7. В файле my-component.component.html добавьте код, который отображает переданный компонент, например, <ng-container *ngComponentOutlet="component"></ng-container>. Вы можете настроить внешний вид этого кода в соответствии с вашими потребностями.
8. В файле my-component.component.ts добавьте входной параметр @ViewChild(MyComponentComponent) childComponent: MyComponentComponent;. Это нужно для рекурсивного получения доступа к компоненту.
9. В файле my-component.component.ts добавьте метод, который будет вызывать метод внутри компонента-ребенка:
public doSomething(): void {
this.childComponent.doSomething();
}
10. В вашем проекте приложения, где вы хотите использовать вашу библиотеку, добавьте ссылку на вашу библиотеку в файле angular.json:
"projects": {
"my-app": {
"architect": {
"build": {
"options": {
"tsConfig": "./tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": [],
"allowedCommonJsDependencies": [
"my-library"
]
},
// ...
11. Соберите вашу библиотеку, используя Angular CLI команду:
ng build my-library
После выполнения этой команды, вы найдете собранную библиотеку в каталоге dist.
Теперь вы можете использовать вашу библиотеку Angular 12 с рекурсивными компонентами в любом другом проекте Angular 12, просто добавив ссылку на вашу библиотеку и импортировав необходимые компоненты и модули.