扩展未定义'的NativeElement的Ngx-Modal'角度2 [英] Ngx-Modal when extended 'NativeElement of undefined' Angular 2

问题描述

按下按钮时，此打孔器应打开一个模式.我已经扩展了现有的ngx-modal，但是会引发错误:无法读取未定义的属性'nativeElement'.

This plunker should open up a modal when the button is pressed. I have extended the existing ngx-modal but it throws error: Cannot read property 'nativeElement' of undefined.

看过控制台，这是因为应该以编程方式将"modalRoot"分配为模态的ViewChild处理程序.即使我已经将super()添加到构造函数中，它的扩展似乎也没有定义，有什么想法吗?

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?

显示问题的柱塞

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

推荐答案

仅扩展类-不同的模板

当您的 NgxModalComponent 组件扩展 Modal 组件时，它将继承您想像的代码.

Extending only the class - different templates

When your NgxModalComponent component extends the Modal component, it will inherit the code like you would imaging.

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

The problem is that you are overriding it's template with your own. This is a problem since some of the code you have inherited relies on the template of the original Modal component.

这里是源代码，其中 Modal 可以访问模板中的元素:

Here is an example from the source code where the Modal is gaining access to an element in the template:

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

当它调用 open()时，

When it invokes open(), it's using this reference internally to set focus on its native element:

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

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

Since you don't have a the same template and no element named modalRoot, it will fail.

使用 ContentChild (文档)

一种解决方案是使用 ContentChild 获取对包装在模板中的 Modal 的引用. yurzui 发布了 plunker 在

One solution is to use ContentChild to get a reference to the Modal that is wrapped inside you template. yurzui posted a plunker showing this in this comment (yurzui created this plunker, no credit to me for that!).

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

What he is doing is getting the modal reference and calling the open() method on the embedded Modal instance instead.

@ContentChild(Modal) modal: Modal;

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

重新考虑您的方法

另一个选择是重新考虑是否确实需要扩展此模式的方法以及正确的前进方式.但这取决于你:)

Another option is to rethink if your approach of extending this modal is really needed and the correct way forward. But that is up to you :)

我希望这会有所帮助！

这篇关于扩展未定义'的NativeElement的Ngx-Modal'角度2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！