Ngx-модальный при расширении 'NativeElement of undefined' Angular 2

Question

Этот поршень должен открывать модальный при нажатии кнопки. Я расширил существующий ngx-модал, но он выдает ошибку: Невозможно прочитать свойство 'nativeElement' из неопределенного.

Посмотрев на консоль, это происходит потому, что "modalRoot" должен быть программно назначен как обработчик ViewChild для модального объекта. Кажется, он не определяется при расширении, хотя я добавил super() в свой конструктор, есть идеи?

Плункер, который показывает проблему

    //our root app component
import {Component, NgModule, HostListener, ElementRef} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {ModalModule} from "ngx-modal";
import { Modal } from "ngx-modal";

@Component({
    selector: 'ext-ngx-modal', 
    template: `<ng-content></ng-content>`,
})
export class NgxModalComponent extends Modal {
    constructor() {
        super();
    }

    openExt():void {
      this.open();
    }

    @HostListener('document:keydown', ['$event'])
    onkeydown(ev: KeyboardEvent) {
        console.log("this.isOpened: " + this.isOpened;
    }
}

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}} I am </h2>
      <div class="row container-fluid">
        <button (click)="myExtNgxModal.openExt()"> open my modal</button>
        <ext-ngx-modal #myExtNgxModal>
          <modal>
              <modal-header>
                  <h1>Modal header</h1>
              </modal-header>
              <modal-content>
                  Press F12 see the console...press a key while modal open
              </modal-content>
              <modal-footer>
                  <button class="btn btn-primary" (click)="myModal.close()">close</button>
              </modal-footer>
          </modal>
        </ext-ngx-modal>
      </div>
    </div>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = 'Angular2'
  }
}

@NgModule({
  imports: [ BrowserModule, ModalModule ],
  declarations: [ App, NgxModalComponent ],
  exports: [ NgxModalComponent ],
  bootstrap: [ App ]
})
export class AppModule {}

Answer 1

Расширение только класса - разные шаблоны

Когда ваш NgxModalComponent компонент расширяет Modal Компонент, он будет наследовать код, как если бы вы представляли.

Проблема в том, что вы переопределяете его шаблон своим собственным. Это проблема, так как часть кода, который вы унаследовали, использует шаблон оригинала. Modal составная часть.

Вот пример из исходного кода, где Modal получает доступ к элементу в шаблоне:

/***** FROM NGX-MODAL SOURCE *****/
@ViewChild("modalRoot")
public modalRoot: ElementRef;

Когда это вызывает open(), он использует эту ссылку внутри, чтобы установить focus на его родной элемент:

/***** FROM NGX-MODAL SOURCE *****/
window.setTimeout(() => this.modalRoot.nativeElement.focus(), 0);

Так как у вас нет того же самого template и нет элемента с именем modalRoot, он потерпит неудачу.

Решение (s)

С помощью ContentChild ( документы)

Одним из решений является использование ContentChild чтобы получить ссылку на Modal это внутри вашего шаблона. В этом комментарии yurzui опубликовал плункер, который показал это (yurzui создал этот плункер, но мне за это не поверили!).

То, что он делает, это получает модальную ссылку и вызывает open() метод на встроенном Modal экземпляр вместо.

@ContentChild(Modal) modal: Modal;

  openExt():void {
    this.modal.open();
  }

Переосмысливая свой подход

Другой вариант - переосмыслить, действительно ли нужен ваш подход к расширению этого способа и правильный путь вперед. Но это зависит от вас:)

Надеюсь, это поможет!