在 Angular 中将数据从一个组件发送到另一个组件（已关闭）

Question

我目前正在尝试从一个组件向另一个组件发送数据（我在变量中获得的一个简单字符串）。通常，我会使用 EventEmitter 但在我的情况下它不起作用（或者我相信在尝试之后！）。这是因为最初保存数据的组件未使用标记在 html 上调用。它以另一种方式实现：通过调用 class!

这就是您需要的我的代码：

保存电子邮件字符串值的第一个组件

  export class EditEmailCaliComponent {
    @Output('caliConfirmationEmail')email = new EventEmitter<string>();

    form: FormGroup = new FormGroup({
      emailAddress: new FormControl(''),
    });

    constructor(public dialogRef: MatDialogRef<EditEmailCaliComponent>, @Inject(MAT_DIALOG_DATA) public data: boolean) {}

    saveEmail(){
      this.email.emit(this.form.controls.emailAddress.value);
      console.log('email is ' + this.form.controls.emailAddress.value);
    }
  }

第二个组成部分。我正在尝试使用 trySave() 方法将电子邮件输出到控制台

  export class CaliDialogComponent implements OnInit {

  name = '';
  scannerList: string[] = [];
  displayedColumns: string[] = ['scanners'];
  usedEmail: string[] = [];
  displayedColumns2: string[] = ['email'];

  constructor(public dialogRef: MatDialogRef<CaliDialogComponent>,
              @Inject(MAT_DIALOG_DATA) public data: boolean,
              private userService: UserService,
              private dialog: MatDialog) {
    this.data = true;
  }

  ngOnInit(): void {
    this.loadCali();
    this.loadEmail();
  }

  loadCali(): void {
    this.userService.loadCali().subscribe((table) => {
      this.scannerList = table;
    });
  }

  loadEmail(): void {
    this.userService.getEmail().subscribe((answer) => {
      this.usedEmail = [];
      this.usedEmail.push(answer.response);
    });
  }

  onNoClick(): void {
    this.data = false;
    this.dialogRef.close();
  }

  editCali(element: string): void {
    const dialogRef = this.dialog.open(EditCaliDialogComponent, {
      width: '250px',
    });

    dialogRef.componentInstance.form.patchValue({
      scannerName: element,
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result !== element && result !== undefined && result !== '') {
        this.userService.updateCali(element, result).subscribe(() => {
          this.loadCali();
        });
      }
    });
  }
  editEmail(element: string): void {
    const dialogRef = this.dialog.open(EditEmailCaliComponent, {
      width: '250px',
    });

    dialogRef.componentInstance.form.patchValue({
      emailAddress: element,
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result !== element && result !== undefined && result !== '') {
        // this.userService.updateEmail(element, result).subscribe(() => { // Update the email address stored on the database.
        //    // Send the value to the modified one and send it to server...
        // });
      }
    });
  }

  createCali(): void {
    if (this.name === '') { return; }
    this.userService.createCali(this.name).subscribe(() => {});
  }

  trySave(email): void{
    console.log('email is + ' + email.this.form.controls.emailAddress.value);
  }

  deleteCali(element: string): void {
    const dialogRef = this.dialog.open(DeleteDialogComponent, {
      width: '250px',
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result) {
        this.userService.deleteCali(element).subscribe(() => {
          this.loadCali();
        });
      }
    });
  }
}

邮箱的Html部分


<table mat-table [dataSource]="usedEmail" class="mat-elevation-z8 tabElement">
    <app-edit-email-cali (caliConfirmationEmail)="trySave($event)"></app-edit-email-cali>

    <ng-container matColumnDef="email">
          <th mat-header-cell *matHeaderCellDef>Receiving Email</th>
          <td mat-cell *matCellDef="let element
  ">
              <span class="floatLeft">{{element}}</span>
              <button mat-icon-button title="Edit" (click)="editEmail(element)" class="btn">
                  <mat-icon color="primary">edit</mat-icon>
              </button>
          </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns2"></tr>
      <tr
          mat-row
          *matRowDef="let row; columns: displayedColumns2;"
      ></tr>
  </table>

如果您还需要什么，我很乐意提供！

更新 --> 已修复 搞定了，谢谢大家！

Answer 1

尝试改变这个...

在您的第一个组件中：

@Output() email = new EventEmitter<string>();

...

saveEmail(){
  this.email.emit("your string or any variable here");
}

第二个（父）组件模板：

<app-edit-email-cali (email)="trySave($event)"></app-edit-email-cali>

第二个（父）组件 ts：

trySave(event: string){
  console.log(event)
...
}

Answer 2

你的错误在这里：

trySave(email): void{
  console.log('email is + ' + email.this.form.controls.emailAddress.value);
}

尝试将获取价值更改为：

trySave(email): void{
  console.log('email is + ' + email);
}

P.S。如果这不起作用，请提供触发 saveEmail 函数的代码。

在 Angular 中将数据从一个组件发送到另一个组件（已关闭）

Sending data from one component to another in Angular (CLOSED)

angular-cli

angular