Question

我正在使用官方Angular Material-Design-Components。但是在尝试使用对话框组件时我遇到了麻烦。尽管有一个例子，它根本行不通。我想必定会缺少一些东西。

如果您查看以下example right here并查看代码，则ts文件包含两个组件。第一个引用html，在示例中显示。但是没有显示第二个组件的html。我想这是我的问题。第二个组件有以下装饰器：

@Component({
  selector: 'dialog-result-example-dialog',
  templateUrl: 'dialog-result-example-dialog.html',
})

所以dialog-result-example-dialog.html在我的情况下看起来像这样（这不是那里的例子的一部分）：

<h2 md-dialog-title>Delete all</h2>
<md-dialog-content>Are you sure?</md-dialog-content>
<md-dialog-actions>
  <button md-button md-dialog-close>No</button>
  <!-- Can optionally provide a result for the closing dialog. -->
  <button md-button [md-dialog-close]="true">Yes</button>
</md-dialog-actions>

选择器引用dialog-result-example-dialog。但是应该放在哪里？这个例子似乎有点不完整......至少对我而言，因为我是角质材料的初学者。你有没有人在他自己的机器上运行示例？我想知道，我错过了什么......

感谢，谢尔顿

Answer 1

我要做一个迷你教程：

这是您可以创建的最简单的MdDialog：

import { Component } from '@angular/core';
import { MdDialogRef } from '@angular/material';

@Component({
  selector: 'MyCustomDialog',
  templateUrl: './MyCustomDialog.html',
  styleUrls: ['./MyCustomDialog.css']
})
export class MyCustomDialog{

  constructor(
    public dialogRef: MdDialogRef<MyCustomDialog>,
  ) { }
}

要从任何其他组件实例化它：

第1步：将对话框组件添加到entryComponents

的app.module.ts数组中

@NgModule({
  entryComponents: [
    MyCustomDialog,
  ],
})

第2步：在任何组件中

constructor(private mdDialog: MdDialog){}

openDialog(){
  this.mdDialog.open(MyCustomDialog);
}

注意：由于组件是通过代码而不是模板创建的，因此您不能使用其选择器，这也是您必须将组件添加到entryComponents数组的原因

Answer 2

这里是一个例子。

组件＃1。

import { Component, OnInit } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { SecondDialogComponent } from '../second-dialog/second-dialog.component';

export interface DialogData {
  animals: {};
  likes: {};
}

@Component({
  selector: 'app-first-dialog',
  templateUrl: './first-dialog.component.html',
  styleUrls: ['./first-dialog.component.css']
})
export class FirstDialogComponent implements OnInit {
  // animal: any;
  // like: any;
  // dialogRef: MatDialogRef<SecondDialogComponent>;

  constructor(public dialog: MatDialog) { }

  ngOnInit() { }

  openDialog() {
    this.dialog.open(SecondDialogComponent, {
      hasBackdrop: true,
      data: {
        animals: ['Panda', 'Unicorn', 'Lion'],
        likes: ['Yes', 'No']
      },
      panelClass: 'custom-dialog-container'
    });
  }
}

组件＃2

import { Component, Inject, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { DialogData } from '../first-dialog/first-dialog.component';

@Component({
  selector: 'app-second-dialog',
  templateUrl: './second-dialog.component.html',
  styleUrls: ['./second-dialog.component.css']
})
export class SecondDialogComponent implements OnInit {

  constructor(public dialogRef: MatDialogRef<SecondDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public dialogData: DialogData) { }

  likesFormControl: FormControl = new FormControl();
  allAnimals: any = this.dialogData.animals;
  allLikes: any = this.dialogData.likes;
  selected: String = "Panda";
  likeSelected: String = 'Yes';
  inputVal: String = "Yes";
  // consolidated: [];
  animal: any;
  like: any;
  saved: boolean = false;

  ngOnInit() { }

  ngAfterViewInit() {
    this.dialogRef.beforeClosed().subscribe((result: { animal: any; like: any; }) => {
      this.animal = result.animal;
      this.like = result.like;
    });
  }

  save() {
      this.saved = true;
    }
  reset() {
    this.saved = false;
    // this.inputVal="yes";
    this.likeSelected = "Yes";
  }

  closeDialog() {
    // this.consolidated = this.allAnimals.slice(0, this.allAnimals.length);
    // this.consolidated = this.allLikes.slice(0, this.allLikes.length);
    this.dialogRef.close();
  }
}

组件1的HTML

<div class="container">
    <div class="row justify-content-center">
        <div class="col-lg-4 mt-4 text-center">
            <h4>Click the button to select your favorite animal</h4>
            <button mat-button (click)="openDialog()">Open dialog</button>
        </div>
    </div>
</div>

组件2的HTML

<div class="row float-right">
  <mat-icon matSuffix style="cursor: pointer;" (click)="closeDialog()">close</mat-icon>
</div>
<div mat-dialog-title class="mt-4">
  <h1>Favorite Animal</h1>
  <h2>{{selected}}</h2>
</div>
<div mat-dialog-content>
  <div>
    <mat-label>Select an Animal</mat-label>
  </div>
  <mat-form-field appearance="outline">
    <mat-select [(ngModel)]="selected">
      <mat-option *ngFor="let animal of allAnimals" [value]="animal">{{animal}}</mat-option>
    </mat-select>
  </mat-form-field>
  <div>
    <mat-label>Do you like the: {{selected}}?</mat-label>
  </div>
  <mat-form-field appearance="outline">
    <mat-select [(ngModel)]="likeSelected">
      <mat-option *ngFor="let like of allLikes" [value]="like">{{like}}</mat-option>
    </mat-select>
    <!-- <input matInput type="text" [(ngModel)]="inputVal"> -->
  </mat-form-field>
  <div class="justify-content-center mb-4">
    <div *ngIf="likeSelected.toUpperCase() === 'YES'; else label2">{{likeSelected}} I like the {{selected}}</div>
    <ng-template #label2>{{likeSelected}} I don't like the {{selected}}</ng-template>
  </div>
</div>
<div mat-dialog-active>
  <button [disabled]="saved || likeSelected.toUpperCase() === 'NO'" (click)="save()" class="btn btn-primary ml-2"
    type="button">Save</button>
  <button class="btn btn-outline-danger ml-5" type="button" (click)="closeDialog()">Cancel</button>
  <button class="btn btn-outline-success ml-5" type="button" (click)="reset()">Reset</button>
</div>
<div class="justify-content-center mt-4">
  <div *ngIf="saved && likeSelected.toUpperCase() === 'YES'" class="text-success">SAVED</div>
</div>

组件2的CSS

::ng-deep .mat-dialog-container {
    background-color: white !important;
    width: 30em;
    height: 35em;
    text-align: center;
}

::ng-deep .mat-dialog-content {
    font-weight: bold;
    /* color: black; */
}

::ng-deep .mat-dialog-title {
    text-align: center;
    margin-top: 10px;
}

/* ::ng-deep .mat-form-field-appearance-outline {
    background-color: black;
} */

/* ::ng-deep .mat-form-field-underline {
    display: none;
} */

角度材料设计对话框

2 个答案: