标签: angular2-material

我已经从下面的链接实现了Angular 2进度微调器

https://github.com/angular/material2/tree/master/src/lib/progress-spinner

我想让它居中,然而,我似乎能够让它发挥作用的唯一方法就是删除它

display: block 

来自CSS.但是,这会导致微调器在页面上显得很大.

任何建议都会很棒.

根本级别的导入不应该全局可用(全局我指的是所有子模块和组件)？

我有以下root/app模块:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ApplicationRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { appRouterProviders, routing } from './app.routes';
import { DashboardModule } from './dashboard/dashboard.module';
import { DecisionModule } from './decision/decision.module';
import { MdCoreModule }           from '@angular2-material/core';
import { MdButtonModule }         from '@angular2-material/button';
import { MdCardModule } …

我将通过Angular2 Material的示例,我看到所有Material模块都是使用该forRoot()方法在根模块中导入的.所以在我的应用程序中我也这样做.

现在我需要在其他Shared模块中使用一些Material组件,这意味着我需要在Shared模块中导入相关的Material包.我不清楚forRoot()在共享模块中导入它们时是否还需要使用该方法.

在此先感谢您的帮助

此示例永远保留在屏幕上:

小吃店,demo.ts

import {Component, ViewContainerRef} from '@angular/core';
import {MdSnackBar, MdSnackBarConfig} from '@angular/material';

@Component({
  moduleId: module.id,
  selector: 'snack-bar-demo',
  templateUrl: 'snack-bar-demo.html',
})
export class SnackBarDemo {
  message: string = 'Snack Bar opened.';
  actionButtonLabel: string = 'Retry';
  action: boolean = false;

  constructor(
      public snackBar: MdSnackBar,
      public viewContainerRef: ViewContainerRef) { }

  open() {
    let config = new MdSnackBarConfig(this.viewContainerRef);
    this.snackBar.open(this.message, this.action && this.actionButtonLabel, config);
  }
}

如何让它在2秒后消失(以某种方式设置持续时间/超时)？

我正在实现material2的对话框组件并面临这个问题:

我想为所有确认类型的消息创建一个通用对话框,开发人员可以根据业务需求将文本输入到对话框中.但根据文件,没有这样的规定.我们是否有相同的解决方法,或者我应该将其作为github上的功能请求发布？

export class ConfirmationDialogComponent implements OnInit {

@Input() confirmationText: string;
@Input() confirmationTitle: string;
@Input() confirmationActions: [string, string][] = [];

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

ngOnInit() {
}

}

这样打电话:

let dialogRef = this.dialog.open(ConfirmationDialogComponent);

如何更改所选选项的颜色mat-list-option？现在我有这样的事情：

当前列表

我想将整个选项或卡片“选择时”的颜色更改为绿色。像这样的东西：

我的代码是这样的：

<mat-selection-list #list>
    <mat-list-option *ngFor="let yuvak of yuvaks">
    {yuvak.name}
    {yuvak.phonenumber}
     </mat-list-option>
</mat-selection-list>

我刚刚搬到angular-cli 1.0.0-beta.11-webpack.2
那里有很多烦人的事情,但我面临的最大问题是外部css文件(可能我也会遇到js文件的问题).

在我的项目中使用Angular2材料并且menu component需要overlay.css.当我把它包括在index.html:

<link href="vendor/@angular2-material/core/overlay/overlay.css" rel="stylesheet">

之后ng serve或者dist文件夹中ng build的覆盖css文件丢失了.

有作为的问题上angular-cli github.我完全按照提到的方式做了一切,但仍然无法正常工作.

我创建了一个assets文件夹和styles.css文件

• SRC
• SRC /应用

我的angular-cli.json文件看起来像:

{
  "project": {
    "version": "1.0.0-beta.11-webpack.2",
    "name": "cli-webstorm"
  },
  "apps": [
    {
      "root":"src",
      "assets":"assets",
      "main": "src/main.ts",
      "tsconfig": "src/tsconfig.json",
      "mobile": false,
      "styles": "styles.css",
      "environments": {
        "source": "environments/environment.ts",
        "prod": "environments/environment.prod.ts",
        "dev": "environments/environment.dev.ts"
      }
    }
  ],
  "addons": …

我想创建一个自动完成组件,它向服务器发出请求并在屏幕上呈现接收到的值.我想明白是怎么portal和overlay工作.现在这是我自动完成的组件

import {
    Component, OnInit, Input, Output, EventEmitter, OnDestroy, ViewChild, ViewContainerRef,
    ElementRef, Optional
} from '@angular/core';
import { ControlValueAccessor } from '@angular/forms';
import { MdOption, ConnectedOverlayDirective, Dir, transformPlaceholder, transformPanel, fadeInContent } from '@angular/material';

import { Subscription } from 'rxjs/Subscription';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Subject } from 'rxjs/Subject';

import { AutocompleteConfiguration } from './autocomplete-config.model';
import { SearchState, SearchingService, IBackend } from './../../services/searching.service';
import { ISearchConfig } from './../../models/iSearch-config';
import { IHint } from …

我正在使用@ angular-2.0.0-rc.5,@ angular2-material 2.0.0-alpha.7-4&Angular-CLI 1.0.0-beta.11-webpack.2

当我尝试编译它时会抛出一个错误,找不到名字'HammerManager'.请参阅附件截图.

我找到了一些Angular-CLI(非webpack)版本的解决方案,但没有找到webpack版本的解决方案.

有人用上面的设置解决了这个问题吗？

我有一个angular2应用程序使用Angular2材质库进行样式设置.我正在尝试添加一个FAB(浮动操作按钮)悬停在应用程序的右上角,但它将自己固定到其父组件,而不是窗口.

应用程序的层次结构如下:

app.component
|-detail.component

在app.component模板中,我在layout指令的主体中使用带有router-outlet的md-sidenav-layout指令:

<md-sidenav-layout>
  <md-sidenav #sideNav (open)="closeStartButton.focus()">
    <router-outlet name="navMenu"></router-outlet>
    <br>
    <button md-button #closeStartButton (click)="sideNav.close()">Close</button>
  </md-sidenav>
  <md-toolbar color="primary">
    <button md-icon-button (click)="sideNav.toggle()">
      <md-icon class="md-24">menu</md-icon>
    </button>
    <span>{{title}}</span>
  </md-toolbar>
  <div role="main">
    <router-outlet></router-outlet>
  </div>
</md-sidenav-layout>

在详细信息组件模板中,我在模板顶部有以下内容:

<button md-mini-fab class="fab" (click)="toggleAdd()">
  <i class="material-icons">add</i>
</button>

和该组件的CSS:

.fab {
  display: block;
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  z-index: 10;
}

但是,当我导航到详细信息页面时,.fab相对于组件而不是窗口定位.我已尝试使用encapsulation: ViewEncapsulation.None详细信息组件,但这也不会影响它.有没有办法保持fab在详细信息组件中定义,但仍然相对于窗口固定？