使用来自组件的 @Input 指令打开模态后获取对象

Question

我想在打开 Modal 组件时获取对象并获取组件传递的值。

所以这是我在 UserComponent.ts 中打开 ModifyuserModalComponent 的方法：

  constructor(
    public dialog: MatDialog
  ) { }

  modifyUser(user: UteUser) {
    console.log(user); //this print correctlry my object
    this.dialog.open(ModifyuserModalComponent, {
      data: user
    });
  }

这是我的 ModifyuserModalComponent ts 代码：

@Component({
  selector: 'app-modifyuser-modal',
  templateUrl: './modifyuser-modal.component.html',
  styleUrls: ['./modifyuser-modal.component.scss'],
})
export class ModifyuserModalComponent implements OnInit {

  @Input() data: any;

  constructor(
    public dialogRef: MatDialogRef<ModifyuserModalComponent>
  ) { 

  }

  ngOnInit() {
    console.log("usergetted: ", this.data);
  }

  closeDialog(){
    this.dialogRef.close();
  }
}

所以我的目标是在单击打开对话框时从 UserComponent.ts 获取 data。但是当打开 ModifyuserComponent 时，我的数据对象是 undefined。我哪里错了？

Answer 1

this.dialog.open(ModifyuserModalComponent, {
  data: user
});

returns一个MatDialogRef，依次可以访问实例化的组件。

因此这将起作用：

const modalRef = this.dialog.open(ModifyuserModalComponent, {
  data: user
});
const modal = modalRef.componentInstance
modal.data... // your code goes here

Answer 2

使用服务和 Observable 共享数据

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class MessageService {
    private subject = new Subject<any>();

    sendMessage(message: string) {
        this.subject.next({ text: message });
    }

    clearMessage() {
        this.subject.next();
    }

    getMessage(): Observable<any> {
        return this.subject.asObservable();
    }
}

在 ModifyuserModalComponent 中订阅以下方法： this.subscription = this.messageService.getMessage().subscribe(消息 => { this.message = 消息; });

使用来自组件的 @Input 指令打开模态后获取对象

Get object after open modal with @Input directive from component

components

input

angular

angular7

angular8