扩展时的 Ngx-Modal 'NativeElement of undefined' Angular 2

Question

这个 plunker 应该在按下按钮时打开一个模式。我已经扩展了现有的 ngx-modal 但它抛出错误：无法读取未定义的属性 'nativeElement'。

Having looked at the console this is because "modalRoot" should be programatically assigned as a ViewChild handler for the modal. It doesn't seem to get defined when extended even though I've added the super() to my constructor, any ideas?

Plunker that shows issue

    //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

仅扩展 class - 不同的模板

当您的 NgxModalComponent 组件扩展 Modal 组件时，它将像您想象的那样继承代码。

问题是您用自己的模板覆盖了它的模板。这是一个问题，因为您继承的某些代码依赖于原始 Modal 组件的模板。

这是来自 the source code 的示例，其中 Modal 正在获取对模板中元素的访问权限：

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

当它调用 open()、it's using this reference internally 以在其 原生元素上设置 focus 时:

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

因为您没有相同的 template 并且没有名为 modalRoot 的元素，它将失败。

解决方案

使用ContentChild (docs)

一种解决方案是使用 ContentChild 获取对包含在模板中的 Modal 的引用。 yurzui 发布了一个 plunker showing this in （yurzui 创建了这个 plunker，这不归功于我！）。

他正在做的是获取模态引用并在嵌入式 Modal 实例上调用 open() 方法。

@ContentChild(Modal) modal: Modal;

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

重新思考你的方法

另一种选择是重新考虑您是否真的需要扩展此模态的方法以及正确的前进方向。但这取决于你:)

希望对您有所帮助！

扩展时的 Ngx-Modal 'NativeElement of undefined' Angular 2

Ngx-Modal when extended 'NativeElement of undefined' Angular 2

inheritance

typescript

ngx-modal

angular

仅扩展 class - 不同的模板

解决方案