下面是简单的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"
}
}
答案 0 :(得分:2)
我和你有同样的问题。这篇文章帮助我解决了这个问题(虽然我认为这不是故意的,因为它在任何我看过的地方都没有描述):Angular2 Material: Md-Menu opens below router outlet
您需要包含Angular Material中的主题,如下所述:https://github.com/angular/material2/blob/master/guides/theming.md
为我修好了。
答案 1 :(得分:1)
您可以使用此代码更改模态位置。把它放在你的md对话框组件中。
val flow = hiveContext.sql("select * from humsdb.t_flow")
var x = flow.rdd.map { row =>
< do some computation on each row>
}
您可以在对话框组件内的任何位置使用updatePosition方法。
有关详细信息,请查看此链接https://material.angular.io/components/component/dialog
答案 2 :(得分:1)
试试这个
const dialogRef = this.dialog.open(DialogComponentName, {
width: '250px'
position: { bottom: '0'}
});
您还可以添加左:0等。