Angular 2材质如何更新对话框位置? [英] Angular 2 Material How to update Dialog box Position?

问题描述

下面是简单的Angular 2代码，应该在对话框的中间显示对话框.而是在底部显示对话框. 我正在使用"angular-cli":"1.0.0-beta.24"和"@ angular/material":"^ 2.0.0-beta.1"

Below is the simple Angular 2 code that should show dialog box in the middle out of the box. Instead dialog box show at the bottom. I am using "angular-cli": "1.0.0-beta.24" and "@angular/material": "^2.0.0-beta.1"

有人可以帮忙为什么吗?

Can anybody help why this is happening?

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

@Component({
  selector: 'app-root',
  template: `  
  <md-sidenav-container style="width:200px;height:500px;">
    <md-sidenav mode="side" opened="true" #sidenav>
      <md-nav-list>
             <a md-list-item (click)="newItem()">
               New
             </a>
             <a md-list-item>
               Refresh
             </a>
             <a md-list-item>
               Delete
             </a>
      </md-nav-list>                                  
    </md-sidenav>
  </md-sidenav-container>
  `,
})
export class AppComponent {
  title = 'app works!';
constructor(public dialog: MdDialog) {}

  newItem()
  {
    let dialogRef=this.dialog.open(RecordDialogComponent);
      dialogRef.afterClosed().subscribe(result => {
    });
  }
}


@Component({
  selector: 'record-dialog',
  template: `  <h1 md-dialog-title>New Item</h1>

  <md-dialog-actions>
    <button (click)="dialogRef.close('save')">Save</button>
    <button md-dialog-close>Cancel</button>
  </md-dialog-actions>
`
})

export class RecordDialogComponent{
  public title: string;
  public message: string;

  constructor(public dialogRef: MdDialogRef<RecordDialogComponent>) { }

}

下面是package.json

Below is the package.json

{
  "name": "materialt2",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.3.1",
    "@angular/compiler": "^2.3.1",
    "@angular/core": "^2.3.1",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.3.1",
    "@angular/material": "^2.0.0-beta.1",
    "@angular/platform-browser": "^2.3.1",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "@angular/router": "^3.3.1",
    "core-js": "^2.4.1",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^2.3.1",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.24",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.0.2",
    "typescript": "~2.0.3"
  }
}

推荐答案

尝试一下

const dialogRef = this.dialog.open(DialogComponentName, {
  width: '250px'
  position: { bottom: '0'}
});

您还可以添加左:0等.

You can also add left: 0 etc.

这篇关于Angular 2材质如何更新对话框位置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！