Angular 2 Material如何更新对话框位置？

下面是简单的Angular 2代码，它应该在中间显示对话框。对话框显示在底部。我正在使用“angular-cli”：“1.0.0-beta.24”和“@ angular/material”：“^ 2.0.0-beta.1”Angular 2 Material如何更新对话框位置？

任何人都可以帮助为什么会发生这种情况？

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

{ 
    "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" 
    } 
}

来源

2017-01-01 Charlie

我有同样的问题，因为你。这篇文章帮我解决这个问题（虽然我认为这并非因为它没有任何地方描述我看了）：Angular2 Material: Md-Menu opens below router outlet

您需要包括从材料角度主题如下所述：https://github.com/angular/material2/blob/master/guides/theming.md

这为我修好了。

来源

2017-01-03 09:01:20 larsbeck

您可以使用此代码更改模态位置。把它放在你的md-dialog组件中。

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

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

ngOnInit() { 
     this.dialogRef.updatePosition({ top: '25px', left: '25px' }); 
    }

，你可以在任何地方使用updatePosition方法对话框组件中。

更多信息，检查此链接https://material.angular.io/components/component/dialog

来源

2017-05-29 07:42:17

我收到错误消息'updatePosition不是dialogRef' @AmitKumar的属性 – Dalvik

检查这个环节，他们如何应用updatePosition https://github.com/angular/ material2/blob/master/src/demo-app/dialog/dialog-demo.ts如果可能的话显示你的代码的plnkr。确保你的角材料包是最新的。 @RahulMishra –

Angular 2 Material如何更新对话框位置？

回答

相关问题