Угловые 2/5 объявляют директивы в ленивых модулях - PullRequest
Новая
       8

Угловые 2/5 объявляют директивы в ленивых модулях

0 голосов
/ 03 мая 2018

Я хочу повторно использовать директиву в нескольких модулях. Я не могу объявить директиву в parentmodule, потому что все дочерние модули загружаются отложенной загрузкой. Если я объявляю одну и ту же директиву в обоих дочерних модулях, я получаю сообщение об ошибке:

ОШИБКА Ошибка: Uncaught (в обещании): Ошибка: Тип AddDirective является частью из объявлений 2-х модулей: SharedModule и GdprModule! пожалуйста рассмотрите возможность перемещения AddDirective в модуль более высокого уровня, который импортирует SharedModule и GdprModule. Вы также можете создать новый модуль NgModule, который экспортирует и включает AddDirective, а затем импортирует этот NgModule в SharedModule и GdprModule.

AddDirective - это простая директива, которая предоставляет мне ViewContainerRef, который мне нужен для динамических компонентов. Я добавляю их с помощью следующего урока:

https://angular.io/guide/dynamic-component-loader

Нужно ли создавать собственную директиву для каждого ленивого модуля, или есть ли способ предоставить такую ​​же директиву для общего модуля, например?

SharedModule: 

    @NgModule({
      imports: [
        CommonModule
      ],
      declarations: [
         AddDirective
      ]
    })

LazyModule: 

    import { SharedModule } from './pathToShared/sharaed.module';

    @NgModule({
     imports: [ SharedModule ],
     declarations: [ LazyComponent],
     entryComponents: [ DynamicalComponent ]
    })
    export class LazyModule { }

Ответы [ 2 ]

0 голосов
/ 03 мая 2018

Создайте общий модуль, добавьте в него директиву и импортируйте общий модуль в app.module.ts

0 голосов
/ 03 мая 2018

Вы можете создать общий модуль. Добавьте модули, которые используются несколько раз, и экспортируйте их. например

shared.module.ts

    import { NgModule, ModuleWithProviders } from '@angular/core';
    import { CommonModule } from '@angular/common';

    import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
    import { AlertModule, TimepickerModule } from 'ngx-bootstrap';

    import { SweetAlertService } from './../sweetalert2.service';

    import { UnmaskDirective } from '../../directive/unmask.directive';
    import { FileUploadComponent } from '../file-upload/file-upload.component';

    @NgModule({
       imports: [
       CommonModule, NgbModule.forRoot(), AlertModule.forRoot(),TimepickerModule.forRoot(), FileUploadModule
      ],
      declarations: [UnmaskDirective, FileUploadComponent],
      providers: [SweetAlertService],
      exports: [
        NgbModule, AlertModule, TimepickerModule, UnmaskDirective, FileUploadComponent, FileUploadModule
      ]
    })
    export class SharedModule {
      static forRoot(): ModuleWithProviders {
        return {
          ngModule: SharedModule,
          providers: [SweetAlertService]
        }
      }
    }

теперь импортируйте общий модуль в любое время, например, register.module.ts

    import { SharedModule } from './../../common/sharaed/sharaed.module';

    @NgModule({
     imports: [ SharedModule ],
     declarations: [ UserComponent],
     entryComponents: []
    })
    export class RegisterModule { }

теперь модуль регистрации имеет все модули, которые включены в общий модуль

Вы также можете сослаться по этим ссылкам shared.module.ts , пример общего реального модуля angular реального мира , angular-modules-feature-modules

...