标签: angular-material2

我有以下 css 来申请mdToast不同的响应，例如成功、错误、信息、警告。

md-toast.md-error-toast-theme div.md-toast-content{
    color: white !important;
    background-color: red !important;
}

md-toast.md-success-toast-theme div.md-toast-content{
    color: white !important;
    background-color: green !important;
}

我想将此主题 css 应用到 mdToast 下面

$mdToast.show({
                templateUrl:'views/toast-template.html',
                controller:'ToastCtl',
                hideDelay:5000,
                controllerAs: 'toast',
                bindToController: true,
                locals:{message:message,type:type}
            });

我能够成功使用主题或模板。但是，我无法同时使用模板和主题。

该组件使用材料图标。

现在我正在尝试使用 karma（通过 angular cli/webpack）学习单元测试，并且我已经弄清楚了大部分配置来创建组件，但我正在努力理解如何配置材质图标。

这是我迄今为止创建的内容：

/* config */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
import { TickerDirective } from '../../directives/ticker.directive';
import { MdIconModule, MaterialModule } from '@angular/material';
import { MdIconRegistry } from '@angular/material/icon';

/* my stuff */
import { FoodListComponent } from './food-list.component';
import { FoodDataService } from '../../services/food-items/food-data.service';
import { FoodItem } from '../../diet/food-item';
import { WorkingData } from '../../services/working-data/working-data';
import { WorkingDataService …

如何使用flex布局在角度2材质中开发响应式布局.在角度材质中,我们使用下面的代码在桌面和移动视图上进行响应式布局.恩.

<div layout="row" layout-xs="column" layout-wrap="" layout-align="center center">
    <div flex="33" flex-xs="100">
    </div>
    <div flex="33" flex-xs="100">
    </div>
    <div flex="33" flex-xs="100">
    </div>
</div>

我正在使用 angular material 2 对话框将项目添加到列表中。我有一个包含列表（表）的组件（AuthorListComponent）。该组件有一个名为 getAuthors 的函数，它进行一个休息调用并在模板中呈现一个表格。我还有一个按钮，可以打开用于添加新项目的 angular material 2 对话框：

https://github.com/angular/material2/blob/master/src/lib/dialog/README.md

我无法弄清楚的是，当保存对话框中的项目并关闭对话框时，我希望刷新 AuthorListComponent 以便显示新添加的项目。我想我必须在某处使用事件发射器来调用 getAuthors 函数，但是对话框不使用我可以将事件附加到的指令/html 元素。

这是我的模式服务：

import { Observable } from 'rxjs/Rx';
import { AuthorComponent } from '../author/author.component';
import { MdDialogRef, MdDialog, MdDialogConfig } from '@angular/material';
import { Injectable, ViewContainerRef } from '@angular/core';

@Injectable()
export class DialogService {

    constructor(private dialog: MdDialog) { }

    public openDialog(viewContainerRef: ViewContainerRef): Observable<boolean> {
        let dialogRef: MdDialogRef<AuthorComponent>;
        let config = new MdDialogConfig();
        config.viewContainerRef = viewContainerRef;
        config.disableClose = true;
        config.width = '600px';
        dialogRef = …

使用Material Design for Angular 时，如何在Select 组件上设置默认（即选定）选项？

<md-select placeholder="Angular2 Material">
  <md-option>One</md-option>
  <md-option selected>Two</md-option>
  <md-option ng-selected="true">Three</md-option>
</md-select>

搜索 SO 引导我：

• Angular Material md 选择选项组默认选择值
• md-select 无法设置选定的值

我已经尝试过ng-selected="true"和selected属性，都没有工作。

Plunker：https ://plnkr.co/edit/EyC6wpUpgZEihlGclDUU ? p = preview

需要明确的是，我没有使用Material Design for AngularJS Apps。我正在为 Angular使用Material Design。

我使用的md-slider是Angular Material版本2.0.0-beta.8

我选择了indigo-pink主题并将其导入style.css

我对我所拥有的很满意,但我想改变滑块手柄和缩略图的背景颜色.

显然,这是由indigo-pink.css文件中定义的以下css代码设置的:

.mat-accent .mat-slider-thumb,
.mat-accent .mat-slider-thumb-label,
.mat-accent .mat-slider-track-fill{background-color:#ff4081}

事实上,如果我改变了indigo-pink.css,我会得到我想要的东西,但这显然不是正确的方法.

所以问题是改变滑块手柄和缩略图颜色的正确方法,并且为了一般性,如何仅更改Angular Material主题中定义的类的某些属性.

我有一个md-dialog组件- DialogComponent我从同级组件中打开SiblingComponent--我想dialog.component.ts在执行某些操作后将其关闭 。

DialogComponent基本上是带有提交按钮的表单，提交表单使我能够dialog.component.ts执行我正在做的一些验证并将数据发送到服务的功能。

验证通过和数据发送后，我想作出一些超时，然后自动关闭拨号窗口，但我不知道该怎么办好像md-dialog-close在dialog.component.ts

我使用Angular Material 2 Stepper设置了一个线性步进器.

我有不同组件中的表单(组件-a,组件-b,组件-c).在我的主容器组件(容器组件)中,我希望线性步进器在其表单有效时"逐步"遍历每个组件.

是否有某种功能可以stepControl与步进器进行对话以使其正常工作？

我附上了步进器的文档和应用程序的StackBlitz版本.此外,我也有工作的回购链接.

Material Stepper组件:https://material.angular.io/components/stepper/overview

StackBlitz:https://stackblitz.com/edit/angular-material2-issue-mjmu9u ？ file = app/app.component.ts

Github:https://github.com/sam11385

我是Angular 2/4的新手,并且一直在享受Material Design组件(https://material.angular.io).我有一个简单的SPA,它使用一个选项卡组在动态视图之间切换.我有一个加号按钮,用于添加更多选项卡,每个选项卡都可以自行删除.

我的问题是是否可以更改mat-tab-group以包含上栏中的"加号"按钮(选项卡出现的位置).现在它位于mat-tab-group div旁边的div中,因此在我的网页的整个右侧占据了20px,这看起来并不是很好.

我想在我的CSS中使用材质主题中的特定颜色.

例如

.my_tab_group {
  border: 1px solid $some_color_from_theme;
}

Angular Material是否通过某个变量显示不同的颜色阴影,以便我可以在我自己的.scss文件中使用(例如,如上面使用$ some_color_from_theme)？