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

时间:2018-06-28 17:01:11

标签: javascript angular modal-dialog elementref

我有一个名为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添加的元素引用有关吗?哪一部分是错误的?那子组件呢?它是否需要具有一些特定的配置/标记/组件才能起作用?我对棱角非常陌生;我不确定原因是什么。

请帮助我纠正这种情况。 预先感谢,

1 个答案:

答案 0 :(得分:0)

您能否确保NewCustomerComponent正在实现IModalDialog接口。另外,如果不是这种情况,也可以共享NewCustomerComponent的代码。

修改

好像您没有在NewCustomerComponent中定义dialogInit方法,并且由于尚未实现接口IModalDialog而没有弹出。我会要求您按照link的建议在组件类中定义dialogInit方法。