角度2材質更新方法ダイアログボックス位置？

Question

以下は、簡単なアンギュラ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" 
    } 
} 

Answer 1

です。この投稿は、それを解決するために私を助けた（私はそれがどこにも記述されていないため、これは意図していないと思いますが、私は見て）：Angular2 Material: Md-Menu opens below router outletあなたがここで説明するように角度素材からテーマを含める必要が

：https://github.com/angular/material2/blob/master/guides/theming.md

それは私のためにそれを固定した。

Answer 2

このコードを使用してモーダル位置を変更できます。これをあなたの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