我有一个名为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添加的元素引用有关吗?哪一部分是错误的?那子组件呢?它是否需要具有一些特定的配置/标记/组件才能起作用?我对棱角非常陌生;我不确定原因是什么。
请帮助我纠正这种情况。 预先感谢,
答案 0 :(得分:0)
您能否确保NewCustomerComponent
正在实现IModalDialog
接口。另外,如果不是这种情况,也可以共享NewCustomerComponent
的代码。
修改
好像您没有在NewCustomerComponent
中定义dialogInit方法,并且由于尚未实现接口IModalDialog
而没有弹出。我会要求您按照link的建议在组件类中定义dialogInit方法。