Question

尝试创建由导航栏中的菜单按钮创建的mat-dialog，然后打开一个mat-dialog，它将执行其他工作。我可以在navbar component.ts中创建对话框，并将我想要的变量（标题）传递给dialogs.component.ts中的构造函数，但是在component.html中该变量为null。我尝试了各种引用变量的方法，但是没有用。我在控制台中记录了该值，所以我知道该值在构造函数中存在，但是如何在html中对其进行访问？

Navbar.component.ts：

...
  realTimeTracking() {
    const dialogConfig = new MatDialogConfig();

    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;
    dialogConfig.hasBackdrop = true;
    dialogConfig.width = '60%';
    dialogConfig.data = {
      title: "Real-time Tracking"
    };

    console.log('real-time tracking, dialogConfig.data:', dialogConfig);

    this.dialog.open(DialogsComponent, dialogConfig );

  };

....

dialogs.component.ts：

import { Component, OnInit, Inject } from '@angular/core';
import { MatDialog } from '@angular/material';
import { MatDialogConfig } from '@angular/material';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';

@Component({
  selector: 'app-dialogs',
  templateUrl: './dialogs.component.html',
  styleUrls: ['./dialogs.component.scss']
})
  export class DialogsComponent implements OnInit {
     title: string;

  constructor(private dialogRef: MatDialogRef<DialogsComponent>,
              @Inject(MAT_DIALOG_DATA) data: {title: string} ) { 
                console.log('constructing dialog, data=', data);
                console.log('data.title:', data.title)
                this.title = data.title;
                console.log('this.title:', this.title);
              }

  ngOnInit() {
  }

}

dialogs.component.html：

<h2 mat-dialog-title>title={{data.title}}</h2>
<h2 mat-dialog-title>title</h2>
<mat-dialog-content >

  <mat-form-field>
    <label>Date/Time Range
      <input [owlDateTimeTrigger]="dt10" [owlDateTime]="dt10"
             [selectMode]="'range'" style="width: 70%">
      <owl-date-time #dt10></owl-date-time>
    </label>
  </mat-form-field>
</mat-dialog-content>

<mat-dialog-actions align="center">
  <button class="mat-raised-button"(click)="close()">Close</button>
  <button class="mat-raised-button mat-primary"(click)="save()">Save</button>
</mat-dialog-actions>

对话框的屏幕截图：控制台日志的屏幕截图：

肯定我做错了一件简单而明显的事情...

谢谢！

Answer 1

我想应该是data.title

第一行：

<h2 mat-dialog-title>title={{data.title}}</h2>

还在.ts文件中，数据应该是这样的对象：

@Inject(MAT_DIALOG_DATA) data: {title:string}

Answer 2

正如@GaryB指出的那样，您应该这样做：

@Inject(MAT_DIALOG_DATA) data: {title:string}

在您的控制器中，当您说：

@Inject(MAT_DIALOG_DATA) data: string

您是说data是一个字符串类型的变量，因此当您尝试设置

this.title = data.title

它将失败，因为data没有名为title的属性。

更新

您应该更改您的

<h2 mat-dialog-title>title={{data.title}}</h2>

到

<h2 mat-dialog-title>title={{title}}</h2>

因为数据是一个块作用域变量。

A working example

变量值在html中为null，但在构造函数中具有值

2 个答案: