[转]Material使用08 MdDialogModule、MdAutocompleteModule

时间 2019-12-01

标签 material 使用 mddialogmodule mdautocompletemodule 繁體版

原文原文链接

本文转自：https://www.cnblogs.com/NeverCtrl-C/p/8125346.html css

1 MatDialog

　　1.1 简要描述

　　　　MdDialog是一个服务，能够利用它来打开一个具备material风格和动画效果的对话框html

　　　　技巧01：虽然已经在模块级别导入了MdDialogModule可是在须要依赖注入MdDialog服务的组件仍然须要单独导入MdDialog服务编程

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { 
  MdSidenavModule, 
  MdToolbarModule,
  MdIconModule,
  MdButtonModule,
  MdIconRegistry,
  MdCardModule,
  MdInputModule,
  MdListModule,
  MdSlideToggleModule,
  MdGridListModule,
  MdDialogModule
 } from '@angular/material';
 import { HttpModule } from '@angular/http';

@NgModule({
  imports: [
    CommonModule,
    HttpModule,
    MdSidenavModule,
    MdToolbarModule,
    MdIconModule,
    MdButtonModule,
    MdCardModule,
    MdInputModule,
    MdListModule,
    MdSlideToggleModule,
    MdGridListModule,
    MdDialogModule
  ],
  declarations: [],
  exports: [
    CommonModule,
    MdSidenavModule,
    MdToolbarModule,
    MdIconModule,
    MdButtonModule,
    HttpModule,
    MdCardModule,
    MdInputModule,
    MdListModule,
    MdSlideToggleModule,
    MdGridListModule,
    MdDialogModule
  ],
  providers: [
    // MdDialog
  ]
})
export class SharedModule { }

import { Component, OnInit } from '@angular/core';
import { MdDialog } from '@angular/material';
import { Test02Component } from '../test02/test02.component';

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

  color = "red";

  constructor(
    private dialog: MdDialog
  ) { }

  ngOnInit() {
    
  }

  openNewProjectDialog() {
    this.dialog.open(Test02Component, {
      height: `400px`,
      width: '400px',
      data: `hello world`
    });
  }
}

　　1.2 MdDialog服务的用途

　　　　利用MdDialog服务提供的open方法能够打开对话框markdown

　　　　格式：this.MdDialog服务实例.open(对话框组件，参数和数据);app

　　　　例子：ide

　　　　　　技巧01：须要在使用MdDialog服务的组件引入并引来注入MdDialog服务动画

import { Component, OnInit } from '@angular/core';
import { MdDialog } from '@angular/material';
import { Test02Component } from '../test02/test02.component';

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

  color = "red";

  constructor(
    private dialog: MdDialog
  ) { }

  ngOnInit() {
    
  }

  openNewProjectDialog() {
    this.dialog.open(Test02Component, {
      height: `400px`,
      width: '400px',
      data: `hello world`
    });
  }
}

　　　　　　技巧02：须要将对话框组件this

　　　　　　技巧03：做为MdDialog组件的书写格式和md-card组件很相似，只不过是利用指令实现的spa

<form>
  <h2 md-dialog-title>新建项目</h2>
  <div md-dialog-content>
    <md-input-container class="fill-width">
      <input mdInput type="text" placeholder="项目名称" />
    </md-input-container>
    <md-input-container class="fill-width">
      <input mdInput type="text" placeholder="项目描述" />
    </md-input-container>
  </div>
  <div md-dialog-actions>
    <button md-raised-button type="button" color="primary">
      <md-icon>save</md-icon>
      <span>保存</span>
    </button>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button md-raised-button type="button" color="accent" (click)="onCloseNewProjectDialog()">
      <md-icon>cancel</md-icon>
      <span>取消</span>
    </button>
  </div>
</form>

　　1.3 对话框组件

　　　　因为MdDialog是在运行期间进行实例化的，因此Angular须要一些额外的信息才可以在运行期间建立对话框组件实例。所以，必须将对话框组件在模块级别进行个别的声明 -> 将要做为对话框的组件再在entryComponents中进行一次声明3d

import { NgModule } from '@angular/core';
import { SharedModule } from '../shared/shared.module';
import { LoginComponent } from './login/login.component';
import { LoginRoutingModule } from './login-routing.module';
import { RegisterComponent } from './register/register.component';
import { TestComponent } from './test/test.component';
import { Test02Component } from './test02/test02.component';

@NgModule({
  imports: [
    SharedModule,
    LoginRoutingModule
  ],
  declarations: [
    LoginComponent, 
    RegisterComponent, 
    TestComponent, 
    Test02Component
  ],
  entryComponents: [
    Test02Component
  ]
})
export class LoginModule { }

2 MdDialogRef

　　2.1 简要描述

　　　　经过MdDialog建立的对话框组件能够依赖注入MdDialogRef服务，该服务的close方法能够用来关闭对话框，并向触发对话框的组件传递一些信息

　　　　技巧01：虽然在模块级别已经导入了MdDialogModule，可是在对话框组件任然要单独引入MdDialogRef而且经过构造器进行依赖注入

　　2.2 MdDialogRef的用途

　　　　2.2.1 关闭对话框

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

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

  constructor(
    private dialogRef: MdDialogRef<Test02Component>
  ) { }

  ngOnInit() {
    
  }

  onSaveClick() {
    this.dialogRef.close('经过对话框的保存按钮关闭了对话框');
  }

}

　　　　　　从MdDialogRef的源码能够看出close方法的参数是一个可选参数（可传可不传）

/**
 * @license
 * Copyright Google Inc. All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.io/license
 */
import { OverlayRef } from '../core';
import { DialogPosition } from './dialog-config';
import { Observable } from 'rxjs/Observable';
import { MdDialogContainer } from './dialog-container';
import 'rxjs/add/operator/filter';
/**
 * Reference to a dialog opened via the MdDialog service.
 */
export declare class MdDialogRef<T> {
    private _overlayRef;
    private _containerInstance;
    /** The instance of component opened into the dialog. */
    componentInstance: T;
    /** Whether the user is allowed to close the dialog. */
    disableClose: boolean;
    /** Subject for notifying the user that the dialog has finished closing. */
    private _afterClosed;
    /** Result to be passed to afterClosed. */
    private _result;
    constructor(_overlayRef: OverlayRef, _containerInstance: MdDialogContainer);
    /**
     * Close the dialog.
     * @param dialogResult Optional result to return to the dialog opener.
     */
    close(dialogResult?: any): void;
    /**
     * Gets an observable that is notified when the dialog is finished closing.
     */
    afterClosed(): Observable<any>;
    /**
     * Updates the dialog's position.
     * @param position New dialog position.
     */
    updatePosition(position?: DialogPosition): this;
    /**
     * Updates the dialog's width and height.
     * @param width New width of the dialog.
     * @param height New height of the dialog.
     */
    updateSize(width?: string, height?: string): this;
    /** Fetches the position strategy object from the overlay ref. */
    private _getPositionStrategy();
}

　　　　2.2.2 触发对话框的组件能够利用MdDialogRef来接收对话框关闭时传递的数据

　　　　　　技巧01：MdDialog的open方法返回的实际上是一个MdDialogRef对象，咱们能够利用这个MdDialogRef来获取对话框传递过来的数据

　　　　　　技巧02：在利用MdDialogRef对象接收对话框组件传递数据的组件不须要在导入和依赖注入MdDialogRef，

import { Component, OnInit } from '@angular/core';
import { MdDialog } from '@angular/material';
import { Test02Component } from '../test02/test02.component';

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

  color = "red";

  constructor(
    private dialog: MdDialog
  ) { }

  ngOnInit() {
    
  }

  openNewProjectDialog() {
    const dialogRef = this.dialog.open(Test02Component, {
      height: `400px`,
      width: '400px',
      data: `hello world`
    });
    dialogRef.afterClosed().subscribe(result => console.log(result));

  }
}

3 `MD_DIALOG_DATA指令`

　　3.1 简要描述

　　　　MdDialog服务的open方法在打开服务的同时能够向对话框发送一些数据，可是对话框必须依赖一个服务才可以接收到这些数据；这个服务对应的令牌就是MD_DIALOG_DATA

　　　　技巧01：在对话框组件引入MAT_DIALOG_DATA令牌，在对话框组件的构造器中依赖注入MD_DIALOG_DATA令牌对应的服务

import { Component, OnInit, Inject } from '@angular/core';
import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';

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

  constructor(
    private dialogRef: MdDialogRef<Test02Component>,
    @Inject(MD_DIALOG_DATA) private data: any
  ) { }

  ngOnInit() {
    console.log(`对话框接收到的参数为：${this.data}`);
  }

  onSaveClick() {
    this.dialogRef.close('经过对话框的保存按钮关闭了对话框');
  }

}

4 对话框主题设置

　　4.1 简要描述

　　　　对话框是不受应用主题控制的，由于对话框是浮动在上面的

　　4.2 解决办法

　　　　在对话框组件中引入并依赖注入OverlayContainer服务来设置对话框的主题

import { Component, OnInit, Inject } from '@angular/core';
import { MdDialogRef, MD_DIALOG_DATA, OverlayContainer } from '@angular/material';

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

  constructor(
    private dialogRef: MdDialogRef<Test02Component>,
    @Inject(MD_DIALOG_DATA) private data: any,
    private oc: OverlayContainer
  ) { }

  ngOnInit() {
    console.log(`对话框接收到的参数为：${this.data}`);
    this.oc.themeClass = 'myapp-dark-theme';
  }

  onSaveClick() {
    this.dialogRef.close('经过对话框的保存按钮关闭了对话框');
  }

}

5 MdDialog、MdDialogRef、MD_DIALOG_DATA、OverlayContainer总和应用

　　5.1 需求描述

　　　　点击一个按钮 -> 弹出一个新建项目的对话框，并能够向该对话框传递数据 -> 点击对话框的关闭按钮能够关闭对话框 -> 点击对话框的保存按钮也能够关闭对话框并能向触发对话框的组件传递数据 -> 对话框的主题能够根据传递给对话框的数据进行灵活设置

　　5.2 编程步骤

　　　　5.2.1 在共享模块中导入MdDialogModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { 
  MdSidenavModule, 
  MdToolbarModule,
  MdIconModule,
  MdButtonModule,
  MdIconRegistry,
  MdCardModule,
  MdInputModule,
  MdListModule,
  MdSlideToggleModule,
  MdGridListModule,
  MdDialogModule
 } from '@angular/material';
 import { HttpModule } from '@angular/http';

@NgModule({
  imports: [
    CommonModule,
    HttpModule,
    MdSidenavModule,
    MdToolbarModule,
    MdIconModule,
    MdButtonModule,
    MdCardModule,
    MdInputModule,
    MdListModule,
    MdSlideToggleModule,
    MdGridListModule,
    MdDialogModule
  ],
  declarations: [],
  exports: [
    CommonModule,
    MdSidenavModule,
    MdToolbarModule,
    MdIconModule,
    MdButtonModule,
    HttpModule,
    MdCardModule,
    MdInputModule,
    MdListModule,
    MdSlideToggleModule,
    MdGridListModule,
    MdDialogModule
  ],
  providers: [
    // MdDialog
  ]
})
export class SharedModule { }

　　　　5.2.2 将做为对话框的组件在模块界别进行特别的声明

import { NgModule } from '@angular/core';
import { SharedModule } from '../shared/shared.module';
import { ProjectListComponent } from './project-list/project-list.component';
import { ProjectItemComponent } from './project-item/project-item.component';
import { NewProjectComponent } from './new-project/new-project.component';
import { InviteComponent } from './invite/invite.component';
import { ProjectRoutingModule } from './project-routing.module';

@NgModule({
  imports: [
    SharedModule,
    ProjectRoutingModule
  ],
  declarations: [
    ProjectListComponent, 
    ProjectItemComponent, 
    NewProjectComponent, 
    InviteComponent
  ],
  entryComponents: [
    NewProjectComponent, 
    InviteComponent
  ]
})
export class ProjectModule { }

　　　　5.2.3 在须要触发对话框的组件引入MdDialog并进行依赖注入，经过MdDialog的open方法打开对话框

import { Component, OnInit, Inject } from '@angular/core';
import { MdDialog } from '@angular/material';
import { NewProjectComponent } from '../new-project/new-project.component';

@Component({
  selector: 'app-project-list',
  templateUrl: './project-list.component.html',
  styleUrls: ['./project-list.component.scss']
  // providers: [MdDialog]
})
export class ProjectListComponent implements OnInit {
  projects: any;

  constructor(
    private dialog: MdDialog // 依赖注入MdDialog用于打开对话框
  ) { }

  ngOnInit() {
    this.projects = [
      {
        "name": "MES管理系统",
        "des": "MES管理系统描述",
        "coverImg": "assets/img/covers/3.jpg"
      },
      {
        "name": "青春不朽客户管理系统",
        "des": "青春不朽客户管理系统描述",
        "coverImg": "assets/img/covers/4.jpg"
      }
    ];
  }

  openNewProjectDialog() {
    // alert("新增项目");
    // 打开对话框
    const dialogRef = this.dialog.open(NewProjectComponent, {
      width: "300px", 
      height: "300px",
      position: {left: "10px", top: "10px"},
      data: {dark: true}
    });

    // 对话框关闭时接收对话框传过来的数据
    dialogRef.afterClosed().subscribe(result => console.log(result));

  }

}

　　　　5.2.4 在对话框组件中引入MD_DIALOG_DATA, MdDialogRef, OverlayContainer 并进行依赖注入，调用相关的方法接收数据、设置对话框主题、关闭对话框

import { Component, OnInit, Inject } from '@angular/core';
import { MD_DIALOG_DATA, MdDialogRef, OverlayContainer } from '@angular/material';

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

  constructor(
    @Inject(MD_DIALOG_DATA) 
    private data,  // 获取触发对话框组件传过来的数据（须要经过令牌来实现注入）  

    private dialogRef: MdDialogRef<NewProjectComponent>, // 关闭对话框并返回数据时须要用到的数据
    private oc: OverlayContainer
  ) { }

  ngOnInit() {
    // alert(this.data);
    console.log(JSON.stringify(this.data)); // 打印获取到的数据
    this.oc.themeClass = this.data.dark ? 'myapp-dark-theme' : null;
  }

  onSaveClick() {
    // 关闭对话框，关闭的同时会向打开对话框的组件传递数据
    this.dialogRef.close(`I received your message.`);
  }
}

　　5.2.5 效果展现

　　　　5.2.6 官方文档

　　　　　　点击前往

6 MdAutocompleteModule

　　6.1 简单介绍

　　　　MdAutocompleteModule是一个文本输入框，它必须配合input标签使用

　　6.2 使用步骤

　　　　6.2.1 在共享模块中导入MdAutocompleteModule模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { 
  MdSidenavModule, 
  MdToolbarModule,
  MdIconModule,
  MdButtonModule,
  MdIconRegistry,
  MdCardModule,
  MdInputModule,
  MdListModule,
  MdSlideToggleModule,
  MdGridListModule,
  MdDialogModule,
  MdAutocompleteModule
 } from '@angular/material';
 import { HttpModule } from '@angular/http';

@NgModule({
  imports: [
    CommonModule,
    HttpModule,
    MdSidenavModule,
    MdToolbarModule,
    MdIconModule,
    MdButtonModule,
    MdCardModule,
    MdInputModule,
    MdListModule,
    MdSlideToggleModule,
    MdGridListModule,
    MdDialogModule,
    MdAutocompleteModule
  ],
  declarations: [],
  exports: [
    CommonModule,
    MdSidenavModule,
    MdToolbarModule,
    MdIconModule,
    MdButtonModule,
    HttpModule,
    MdCardModule,
    MdInputModule,
    MdListModule,
    MdSlideToggleModule,
    MdGridListModule,
    MdDialogModule,
    MdAutocompleteModule
  ],
  providers: [
    // MdDialog
  ]
})
export class SharedModule { }

　　　　6.2.2 在input标签中使用md-autocomplete的模板变量

<form>
  <h2 md-dialog-title>成员邀请</h2>
  <div md-dialog-content>
    <md-input-container class="full-width">
      <input mdInput type="text" placeholder="请选择成员" [mdAutocomplete]="autoMembers" />
    </md-input-container>
  </div>
  <div md-dialog-actions>
    <button type="button" md-raised-button color="primary" >确认</button>
    <button type="button" md-raised-button color="accent" md-dialog-close  >取消</button>
  </div>
</form>
<md-autocomplete #autoMembers="mdAutocomplete" [displayWith]="displayValue">  
  <md-option *ngFor="let item of items" [value]="item">
      {{ item.name }}
  </md-option>
</md-autocomplete>

　　　　6.2.3 编写md-autocomplete组件最终的显示结果内容

　　　　　　技巧01：若是不给md-autocomplete组件设定displayWith，那么在input组件显示的就会是md-input组件value属性的值

　　　　　　技巧02：给md-input组件指定一个对象时，input的只会是一个对象；利用md-autocomplete组件的displayWith属性能够解决这个问题；displayWith的属性值是一个方法名，该方法的参数就是md-input组件value属性的值，该方法返回的值就是input组件最后显示的值

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-invite',
  templateUrl: './invite.component.html',
  styleUrls: ['./invite.component.scss']
})
export class InviteComponent implements OnInit {
  items : any;

  constructor() { }

  ngOnInit() {
    this.items = [
      {
        id: 1,
        name: '乔峰'
      }, 
      {
        id: 2,
        name: '慕容复'
      },
      {
        id: 3,
        name: '段誉'
      },
      {
        id: 4,
        name: '虚竹'
      }
    ];
  }

  // 设置显示内容
  displayValue(member: {id: number; name: string}) {
    return member ? member.name : null;
  }

}

　　6.3 效果展现

　　6.4 官方文档

　　　　点击前往

[转]Material使用08 MdDialogModule、MdAutocompleteModule

1 MatDialog

1.1 简要描述

1.2 MdDialog服务的用途

1.3 对话框组件

2 MdDialogRef

2.1 简要描述

2.2 MdDialogRef的用途

2.2.1 关闭对话框

2.2.2 触发对话框的组件能够利用MdDialogRef来接收对话框关闭时传递的数据

3 MD_DIALOG_DATA指令

4 对话框主题设置

4.1 简要描述

4.2 解决办法

5 MdDialog、MdDialogRef、MD_DIALOG_DATA、OverlayContainer总和应用

5.1 需求描述

5.2 编程步骤

5.2.1 在共享模块中导入MdDialogModule

5.2.2 将做为对话框的组件在模块界别进行特别的声明

5.2.3 在须要触发对话框的组件引入MdDialog并进行依赖注入，经过MdDialog的open方法打开对话框

5.2.4 在对话框组件中引入MD_DIALOG_DATA, MdDialogRef, OverlayContainer 并进行依赖注入，调用相关的方法接收数据、设置对话框主题、关闭对话框

5.2.5 效果展现

5.2.6 官方文档

6 MdAutocompleteModule

6.1 简单介绍

6.2 使用步骤

6.2.1 在共享模块中导入MdAutocompleteModule模块

6.2.2 在input标签中使用md-autocomplete的模板变量

6.2.3 编写md-autocomplete组件最终的显示结果内容

6.3 效果展现

6.4 官方文档

　　1.1 简要描述

　　1.2 MdDialog服务的用途

　　1.3 对话框组件

　　2.1 简要描述

　　2.2 MdDialogRef的用途

　　　　2.2.1 关闭对话框

　　　　2.2.2 触发对话框的组件能够利用MdDialogRef来接收对话框关闭时传递的数据

3 `MD_DIALOG_DATA指令`

　　4.1 简要描述

　　4.2 解决办法

　　5.1 需求描述

　　5.2 编程步骤

　　　　5.2.1 在共享模块中导入MdDialogModule

　　　　5.2.2 将做为对话框的组件在模块界别进行特别的声明

　　　　5.2.3 在须要触发对话框的组件引入MdDialog并进行依赖注入，经过MdDialog的open方法打开对话框

　　　　5.2.4 在对话框组件中引入MD_DIALOG_DATA, MdDialogRef, OverlayContainer 并进行依赖注入，调用相关的方法接收数据、设置对话框主题、关闭对话框

　　5.2.5 效果展现

　　　　5.2.6 官方文档

　　6.1 简单介绍

　　6.2 使用步骤

　　　　6.2.1 在共享模块中导入MdAutocompleteModule模块

　　　　6.2.2 在input标签中使用md-autocomplete的模板变量

　　　　6.2.3 编写md-autocomplete组件最终的显示结果内容

　　6.3 效果展现

　　6.4 官方文档