3

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

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

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

3 回答 3

3

尝试这个

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

您还可以添加 left: 0 等。

于 2018-04-27T17:06:20.990 回答
2

我和你有同样的问题。这篇文章帮助我解决了这个问题（尽管我认为这不是故意的，因为我看的任何地方都没有描述它）：Angular2 Material: Md-Menu opens below router outlet

您需要包含来自 Angular Material 的主题，如下所述：https ://github.com/angular/material2/blob/master/guides/theming.md

那为我修好了。

于 2017-01-03T09:01:20.577 回答
1

您可以使用此代码更改模态位置。把它放在你的 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-29T07:42:17.203 回答