标签: angular-material2

当我在代码中尝试使用Angular Material时,我遇到了以下错误.

    zone.js:101 GET http://localhost:3000/traceur 404 (Not Found)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:345Zone.scheduleMacroTask @ zone.js:282(anonymous function) @ zone.js:122send @ VM437:3fetchTextFromURL @ system.src.js:1156(anonymous function) @ system.src.js:1739ZoneAwarePromise @ zone.js:607(anonymous function) @ system.src.js:1738(anonymous function) @ system.src.js:2764(anonymous function) @ system.src.js:3338(anonymous function) @ system.src.js:3605(anonymous function) @ system.src.js:3990(anonymous function) @ system.src.js:4453(anonymous function) @ system.src.js:4705(anonymous function) @ system.src.js:408ZoneDelegate.invoke @ zone.js:332Zone.run @ zone.js:225(anonymous function) @ zone.js:591ZoneDelegate.invokeTask @ zone.js:365Zone.runTask @ zone.js:265drainMicroTaskQueue @ zone.js:497ZoneTask.invoke @ zone.js:437
    login:15 Error: Error: XHR error (404 Not Found) loading http://localhost:3000/traceur
    at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:794:30) …

所以在Angular Material 2中,我设置了主题

$store-primary: mat-palette($mat-storecast);
$store-accent:  mat-palette($mat-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).
$store-warn:    mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$store-theme: mat-light-theme($store-primary, $store-accent, $store-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($store-theme);

我从他们的文档中无法弄清楚的是如何从主调色板上获得不同的色调颜色,即按钮上的工具栏.

<button md-mini-fab (click)="zoomIn()" color="primary">
     <md-icon>add</md-icon>
</button>

它似乎只能理解color = …

我使用Angular Material创建了一个工具栏.但是,它没有响应.如何使工具栏响应？

工具栏代码:

<md-toolbar color = "primary">
    <button md-button class="md-primary" [routerLink]="['/basic']"><md-icon class = "icon-20">home</md-icon> &nbsp;Angular Concepts</button>
    <button md-button [mdMenuTriggerFor]="bMenu">Basic Concepts</button>
    <md-menu #bMenu="mdMenu">
      <button md-menu-item [routerLink]="['/a4']">Angular Component</button>
      <button md-menu-item [routerLink]="['/cli ']">Angular CLI</button>
      <button md-menu-item [routerLink]="['/inout']">Event Emitters</button>
      <button md-menu-item [routerLink]="['/template']">Template Driven Forms</button>
      <button md-menu-item [routerLink]="['/reactive']">Data Driven Forms</button>
      <button md-menu-item [routerLink]="['/directives']">Angular Custom Directives</button>
      <button md-menu-item [routerLink]="['/pipes']">Custom Pipes</button>
      <button md-menu-item [routerLink]="['/viewchild']">View Child</button>
      <button md-menu-item [routerLink]="['/view']">View Encapsulation</button>
    </md-menu>

    <button md-button [mdMenuTriggerFor]="aMenu">Advanced Concepts</button>
    <md-menu #aMenu="mdMenu">
      <button md-menu-item [routerLink]="['/ngrx']">Angular Redux using ngrx/store</button>
      <button md-menu-item [routerLink]="['/guard']">Angular Guards</button>
      <button …

输入位于模态对话框内.我不知道它为什么不起作用.我查看了官方文档,它列出了焦点,你可以传递给元素,但它不起作用？

有谁知道为什么？

角度材料 - 输入文档

<form class="example-form">

  <md-input-container class="example-full-width" style="width: 300px; padding: 5px; border-radius: 10px;">
    <input mdInput type="email" name="to" placeholder="Email">
    <md-error></md-error>
  </md-input-container>

  <md-input-container focus focused>
    <input mdInput type="text" name="a" placeholder="zzzz" focus focused (focus)="">
  </md-input-container>

</form>

我想使用Angular Material Datepicker来获取我的页面的日期.我使用此代码,但无法弄清楚如何正确访问所选值.

<md-input-container>
  <input mdInput [mdDatepicker]="myDatepicker">
  <button mdSuffix [mdDatepickerToggle]="myDatepicker"></button>
</md-input-container>
<md-datepicker #myDatepicker></md-datepicker>

我[value]在输入中尝试了该字段但是如何才能将日期发送到我的后端？谢谢.

我使用角度4和材质2处理Web应用程序.我收到此错误

parse errors:
'md-card' is not a known element:
1. If 'md-card' is an Angular component, then verify that it is part of this module.
2. If 'md-card' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<h2>Nothing to show</h2>
[ERROR ->]<md-card>Simple card</md-card>
"): ng:///AppAccessModule/SPLoginComponent.html@1:0
    at syntaxError 

当我尝试在一个文件夹内嵌套两次的组件中使用材料时

这些是我的结构:

  -----Components(folder)
  -------Auth(folder)
  --------Login(component1)
  --------Signup(component2)

但如果我下一次喜欢这样:

  -------Auth(folder)
  --------Login(component 1)
  --------Signup(component2)

我没有任何问题我该怎么做才能解决这个问题？谢谢

我知道我可能在这里遗漏了一些东西.我试图垂直对齐md-icon和一些文本,现在,"示例文本"一词显示在图标下方.

<div>
  <md-icon>home</md-icon> Sample Text
</div>

输出:

我确实尝试使用跨度在示例文本上进行垂直对齐,但无论如何都无法获得任何工作并感觉有点hacky.

有谁知道如何获得这种效果？

我正在尝试使用md-radio-buttons的更改输出,如下所示:

<md-radio-group [(ngModel)]="selected">
    <md-radio-button *ngFor="let a of array" [value]="a"
                 (change)="radioChange()">
        {{a}}
    </md-radio-button>
</md-radio-group>

TS:

selected: string;
filter: any;

radioChange() {
    this.filter['property'] = selected;
    console.log(this.filter);
}

这似乎总是落后于单选按钮一步.即当从无线电A改变选择到无线电B时,它将控制台.log的无线电A的值.

任何帮助将非常感激.

干杯,

P

我使用角度4与角度材料相结合.

我正在使用sidenav容器路由器和自定义生成的菜单:

<mat-sidenav-container>
<mat-sidenav #sidenav>
    <app-menu></app-menu>
</mat-sidenav>
<router-outlet></router-outlet>
</mat-sidenav-container>

在菜单组件内部我使用默认的角度4路由器链接:

<ul>
  <li *ngFor="let hero of heroes">
    <a mat-button [routerLink]="['/hero/', hero.id]" queryParamsHandling="merge">
      {{hero.name}}
    </a>
  </li>
</ul>

我想要做的是Material sidenav在点击其中一个路由器链接时关闭它.

我可以向你保证,如果没有点击事件路由工作正常,它就不会关闭我的sidenav,因为路由器插座位于侧面导航内.

但是,当我添加(click)="sidenav.close()"到a我的整个页面突然刷新,而不是只是跟随路由器链接.

我尝试了很多东西,但我似乎无法弄明白,希望有人可以帮忙!

在运行棉花糖的Xperia M5上,即使在角度材料自己的网站上,角度材质对话框的开启动画也很糟糕.有没有办法我只能在移动设备上禁用对话框的动画？

我已经看过这个,但它建议禁用所有动画,CSS解决方案不起作用.

PS我正在运行Angular 5,一切都更新到稳定.