我有一个名为 delete
的组件,我正在对话框窗口中显示它。对于这个组件,我正在 injecting
像这样的数据:
删除.component.ts
import { Component, Input , OnInit, Output, Inject, EventEmitter } from
'@angular/core';
import {
FormBuilder,
FormControl,
FormGroup,
Validators,
} from '@angular/forms';
import {MAT_DIALOG_DATA} from '@angular/material';
@Component({
selector: 'app-delete',
templateUrl: './delete.component.html',
styleUrls: ['./delete.component.css']
})
export class DeleteComponent {
@Input()
public contact;
constructor(@Inject(MAT_DIALOG_DATA) public data: any,
private fb:FormBuilder,) {} <=== Injecting data to component
public ondelCustomer(): void { <======== DELETE Function
this.someContact = this.data;
this.someContact.id = this.data.id;
this.customersService.deleteContact('00000000-11111-1111-0000000',
this.someContact, this.someContact.id);
}
}
删除.compoent.html
<p>Do you want to delete <span>{{data?.name}}?</span></p>
<button (click)="onDelCustomer()">DELETE</button>
模板 UI 如下所示:
如代码所示,在模板(delete.component.html) 中单击DELETE 按钮将调用onDelCustomer()
函数。它将像这样执行 delete
操作:
public ondelCustomer(): void {
this.someContact = this.data;
this.someContact.id = this.data.id;
this.customersService.deleteContact('00000000-11111-1111-0000000',
this.someContact, this.someContact.id);
}
现在的问题是我不想在 delete
组件中调用这个 ondelCustomer()
函数,我想调用这个 ondelCustomer()
在其他组件中运行,这样我就可以重用这个delete
组件。
所以我这样尝试:
**HTML**
<p>Do you want to delete <span>{{data?.name}}?</span></p>
<button (click)="onDelCustomer()">DELETE</button>
TS
import { Component, Input , OnInit, Output, Inject, EventEmitter } from
'@angular/core';
import {
FormBuilder,
FormControl,
FormGroup,
Validators,
} from '@angular/forms';
import {MAT_DIALOG_DATA} from '@angular/material';
@Component({
selector: 'app-delete',
templateUrl: './delete.component.html',
styleUrls: ['./delete.component.css']
})
export class DeleteComponent {
@Input()
public contact;
@Output() public onDelete: EventEmitter<{}> = new EventEmitter();<========
constructor(@Inject(MAT_DIALOG_DATA) public data: any,
private fb: FormBuilder,) {}
public onDelCustomer(): void {
this.onDelete.emit(this.data);<===============
console.log(this.data)
}
}
在调用 onDelCustomer()
时,我像上面的代码一样发出 onDelete
事件,并且在另一个组件中调用 onDelete
事件(客户组件)像这样:
customer.component.ts
import { Component, OnInit,Input } from '@angular/core';
import { Service } from '../service';
import { map } from 'rxjs/operators';
import { IContact } from '../models';
import {MAT_DIALOG_DATA, MatDialog, MatDialogRef, MatListOption} from
'@angular/material';
import { DeleteComponent } from '../delete/delete.component';
@Component({
selector: 'app-customer',
templateUrl: './customer.component.html',
styleUrls: ['./customer.component.css']
})
export class CustomerComponent implements OnInit {
@Input()
data;
contacts:IContact[];
someContact:IContact[];
constructor(public dialog: MatDialog,
public customersServiceList: Service) {}
public async ngOnInit(): Promise<void> {
this.contacts = await this.customersServiceList.getContactList();
}
public openDialogDelete($event: any): void {
const dialogRef: MatDialogRef<DeleteComponent> =
this.dialog.open(DeleteComponent,{ width:'350px',data:$event,});
}
public onDelete() {
this.someContact = this.data;
console.log(this.someContact);
this.someContact.id = this.data.id;
this.customersService.deleteContact('00000000-11111-1111-0000000',
this.someContact, this.someContact.id);
}
}
When i log in customer component i am unable to recive the data from dialog component(i,e delete component).
我猜不出代码有什么问题。
最佳答案
点击删除按钮,调用这个函数:
onDeleteClick() {
this.dialog.close({action: 1, data: this.data});
}
这里,action和1是任意值,可以是任何值。
现在,在您打开对话框的组件中,使用此函数:
import { Component, OnInit,Input } from '@angular/core';
import { Service } from '../service';
import { map } from 'rxjs/operators';
import { IContact } from '../models';
import {MAT_DIALOG_DATA, MatDialog, MatDialogRef, MatListOption} from '@angular/material';
import { DeleteComponent } from '../delete/delete.component';
@Component({
selector: 'app-customer',
templateUrl: './customer.component.html',
styleUrls: ['./customer.component.css']
})
export class CustomerComponent implements OnInit {
@Input()
data;
contacts:IContact[];
someContact:IContact[];
constructor(public dialog: MatDialog,
public customersServiceList: Service) {}
public async ngOnInit(): Promise<void> {
this.contacts = await this.customersServiceList.getContactList();
}
public openDialogDelete($event: any): void {
this.dialog.open(DeleteComponent, {
width: '350px',data:$event,
}).afterClosed().subscribe(data => {
if(data && data.action === 1) {
this.onDelete(data.data);
}
});
}
public onDelete(data: any) {
console.log('called');
this.someContact = data;
console.log(this.someContact);
}
}
关于angular - 以 Angular 6 将数据从对话框组件发送到其他组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54247834/