javascript - 在 Angular4 的模式对话框中加载和打开组件的正确方法是什么——

Question

我有一个名为 NewCustomerComponent 的组件，我想在单击按钮时通过另一个页面/组件中的模式弹出窗口加载和显示它。我已经编写了相关的代码 [或者看起来是这样]。但我收到以下错误 --

    this._childInstance.dialogInit is not a function
at ModalDialogComponent.dialogInit (modal-dialog.component.js:65)
at ModalDialogService.openDialog (modal-dialog.service.js:26)
at OrderNewComponent.newCl (order-new.component.ts:85)

我的代码也非常简单，在我试图打开模态弹出窗口的组件中。我将只发布相关部分 --

    import { Component, Inject, ViewContainerRef, ComponentRef } from 
             '@angular/core';
    import { Http, Headers } from '@angular/http';
    import { Router } from '@angular/router';
    import { Observable, Subject } from 'rxjs';
    import 'rxjs/add/operator/map';
    import { CustomerSearchService } from '../../../shared/services/customer- 
       search.service';
    import { ICustomer, Customer, CustomerD } from 
       '../../../shared/models/customer';
    import { ModalDialogModule, ModalDialogService, IModalDialog } from 'ngx- 
      modal-dialog';
    import { NewCustomerComponent } from 
      '../../../components/popups/customer/customer-new.component';


    @Component({
        selector: 'order-new',
        templateUrl: './order-new.component.html' 
    })

    export class OrderNewComponent {

    public reference: ComponentRef<IModalDialog>;

    constructor(private cusService: CustomerSearchService, private http: 
        Http, private modalService: ModalDialogService, private viewRef: 
        ViewContainerRef) {

    }

   ngOnInit(): void {

   }


  ** this is where I am trying to load the newcustomercomponent and open it 
  in the popup. not working.     
  newCl() {
     this.newC = true;
     this.exiC = false;

     this.modalService.openDialog(this.viewRef, {
        title: 'Add New Customer',
        childComponent: NewCustomerComponent
     });
   }

 }

** 编辑。添加了 NewCustomerComponent 代码以供引用。

    import { Component, Input, Output, EventEmitter, OnInit, 
       ChangeDetectorRef, Directive, ElementRef, Renderer, AfterViewInit } 
       from '@angular/core';
    import { Router, ActivatedRoute } from '@angular/router';
    import { NgFor } from '@angular/common';
    import { Observable } from 'rxjs/Rx';
    import { BehaviorSubject } from 'rxjs/Rx';
    import { PlatformLocation } from '@angular/common';
    import { Http } from '@angular/http';
    import { ICustomer, Customer } from '../../../shared/models/customer';
    import { UserService } from '../../../shared/services/UserService';
    import { IModalDialog, IModalDialogOptions, IModalDialogButton } from 
         'ngx-modal-dialog';
    @Component({
       selector: 'new-customer',
       templateUrl: './customer-new.component.html'
    })

    export class NewCustomerComponent implements IModalDialog {
       model: Customer = new Customer();
       errors: any;
       submitResponse: any;
       actionButtons: IModalDialogButton[];

       constructor(private userService: UserService, private http: Http) {
                  this.actionButtons = [
                  { text: 'Close', onAction: () => true }
               ];
       }


      ngOnInit() {

      }

      dialogInit(reference: ComponentRef<IModalDialog>, options: 
                       Partial<IModalDialogOptions<any>>) 
      {
                // no processing needed
      }

     createCustomer() {
          this.userService.createCustomer(this.model)
        .take(1)
        .subscribe(
            (response: any) => {
                this.submitResponse = response;

                if (response.success) {
                    console.log('New customer added!');
                }
                else {
                    console.log('Unable to add customer!');
                }
            },
            (errors: any) => this.errors = errors
        );
    return false;
}

     cancelClicked() {

     }

   }

我这里做错了什么？它与我在 viewRef 中添加的元素引用有关吗？哪一部分是错误的？那个子组件呢？它是否需要一些特定的配置/标记/组件才能工作？我对 Angular 很陌生；我不确定是什么原因。

请帮助我纠正这种情况。提前致谢，

Answer 1

请确保 NewCustomerComponent 正在实现 IModalDialog 接口(interface)。另外，如果不是这种情况，您能否也分享一下 NewCustomerComponent 的代码。

编辑

看起来您还没有在 NewCustomerComponent 中定义 dialogInit 方法，并且它之前没有弹出，因为您还没有实现接口(interface) IModalDialog。我会要求您按照 link 上的建议在组件类中定义 dialogInit 方法。 .