Угловой расширяющий класс с вложенным не экспортируемым классом - PullRequest
Новая
       33

Угловой расширяющий класс с вложенным не экспортируемым классом

0 голосов
/ 27 июня 2018

Минимизируя структуру моей проблемы, мы имеем:

lib.module.ts (модуль библиотеки - желает быть неизменным) 

@NgModule({
  declarations: [
   InternalComponent,
   ExternalComponent
  ],
  exports: [
   ExternalComponent
  ]
})
export class LibModule {}


external.component.ts 

@Component({
    selector: 'external',
    template: '<internal></internal> We are in external',
    styles: ['']
})
export class ExternalComponent{}


internal.component.ts 

@Component({
    selector: 'internal',
    template: 'This is internal',
    styles: ['']
})
export class InternalComponent{}

Так что мой долг - продлить ExternalComponent. Насколько я знаю, мы наследуем только логику от машинописи. Css и html должны управляться независимо, в моем случае - копироваться и немного изменяться. Однако, как я могу скопировать HTML ExternalComponent, в то время как InternalComponent не экспортируется из LibModule?
Допустим, ExternalExtendComponent объявлен в AppModule. В AppModule я не могу импортировать InternalComponent. Поэтому я не могу иметь шаблон в ExternalExtendComponent с тегом <internal>. Есть идеи пройти через это?

Ответы [ 2 ]

0 голосов
/ 27 июня 2018

Простым решением может быть написание моего собственного модуля и не использовать библиотечный. Это будет выглядеть так: app.module.ts 

import {InternalComponent,ExternalComponent} from 'myLib'; #myLib is in node_modules
import {TreeSelectExtComponent} from './tree-select-ext/tree-select-ext.component';

        @NgModule({
          declarations: [
           InternalComponent,
           ExternalComponent,
           ExternalExtComponent
          ]
        })
        export class AppModule{}

Важно то, что мы не можем импортировать LibModule нигде в проекте из-за двойных объявлений.

0 голосов
/ 27 июня 2018

На самом деле вам не нужно расширять ExternalComponent, вы можете просто использовать тег external в вашем ExternalExtendComponent html-файле. Это скопирует html external внутри него. Это также отобразит internal компонент внутри extended-external без экспорта из LibModule

См. Этот маленький ДЕМО

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

Чтобы переопределить внешний компонент, создайте шаблонную ссылку (#ext) для тега external в extended-external-comp.

Чтобы ввести стили, вы можете использовать Renderer2

Пример кода 

  @ViewChild('ext') ext : ElementRef

  constructor(private renderer : Renderer2 ) {
  }

  addStyles() {
    let animationState;
    let pEl = this.ext.nativeElement.querySelector('p')
    this.renderer.setStyle(pEl.nativeElement, '@ext', animationState);
  }
...