角材料設計對話框

Question

我正在使用官方的Angular Material-Design-Components 。 但是我在嘗試使用對話框組件時遇到了麻煩。 盡管有一個例子，但它根本不起作用。 我想一定是少了點什么。

如果您在此處查看以下示例並查看代碼，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;
} */