标签: 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的MdToolTip.语法如下

<span mdTooltip="Tooltip!">I have a tooltip</span>

但是,我想在我的锚标签上实现此功能.当class ="not-active"正在运行时,当我将鼠标悬停在ahchor标签上时,我想显示工具提示.我怎么能实现这个目标？

<a [ngClass]="{'not-active': !isCurrentUserExist}" [routerLink]="['/create-timesheet']">Link1</a>


/*disabled side menu links*/
.not-active {
   pointer-events: none;
   cursor: default;
}

所以在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 = …

我正在使用角度2素材的主题之一.我可以使用材料组件上的主题颜色,如按钮,工具栏使用color ="primary".但我无法弄清楚如何主题div.我不想在.css文件中对哈希进行硬编码,因为如果我决定更改主题,它将需要在所有地方进行更改.我错过了什么吗？最好的方法是什么？

我有以下代码

  <mat-tab-group>
    <div *ngFor="let question of subcategory.questions">
        <mat-tab label={{question.question_id}} class="question-tab">{{question.question}}</mat-tab>
    </div>
  </mat-tab-group>

显示如下:

但是我想减少标签宽度,如下所示:

问题是,当我在运行时更改css时,它调整得很好,但是当我把css放到:

.mat-tab {
  min-width: 50px !important;
}
.mat-tab-label[_ngcontent-c9]{
    min-width: 50px !important;
}

它不起作用.知道如何处理这个问题吗？

我使用角度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.

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

我正在使用最新的Angular和最新的Angular Material.我有一个datepicker,我想添加一些验证.文档说该required属性应该开箱即用,但它似乎不像其他表单元素那样处理错误.

这是我的加价:

<mat-form-field class="full-width">
    <input matInput [matDatepicker]="dob" placeholder="Date of birth" [(ngModel)]="myService.request.dob" #dob="ngModel" required app-validateAdult>
    <mat-datepicker-toggle matSuffix [for]="dob"></mat-datepicker-toggle>
    <mat-datepicker #dob></mat-datepicker>
    <mat-error *ngIf="dob.errors && dob.errors.required">Your date of birth is required</mat-error>
</mat-form-field>

这适用于happy-path,因此当选择日期时,日期最终会出现在期望的属性中myService.

然而,验证并不像我期望的那样有效; 在这种情况下,如果我在没有输入日期的情况下单击该字段然后退出该字段,则输入会获得红色样式,但通常的[controlName].errors对象不会被填充.这意味着以通常的方式显示错误消息(与同一页面上不是日期选择器的其他输入一起使用的方式)不起作用:

<mat-error *ngIf="dob.errors && dob.errors.required">Your date of birth is required</mat-error>

在*ngIf因为日期选择器似乎从来没有更新是不正确的dob.errors,这样就不会显示错误消息,即使输入的样式为无效.

这是正确的吗？我错过了什么吗？

我还尝试添加一个自定义指令来验证使用datepicker选择的日期表明用户已超过18:

export class AdultValidator implements Validator {
  constructor(
    @Attribute('app-validateAdult') public validateAdult: string
  ) { }

  validate(control: AbstractControl): { [key: string]: any } {
    const …

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

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

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

如何使用vanilla CSS,HTML或JS更改Angular 2+ Material Design上SVG图标的大小？

如果我在HTML元素中指定图标,样式工作正常:

<mat-icon style="font-size: 16px !important">home</mat-icon>

但是,当我使用该svgIcon属性时(例如,如果使用第三方图标库),则无法调整图标大小:

<mat-icon style="font-size: 16px !important" svgIcon="home"></mat-icon>

我知道SVG的扩展比较复杂,我可以使用该viewBox属性.但是,我甚至无法访问<svg>里面的子元素<mat-icon>做一个丑陋的JS hack.使用vanilla CSS有一种直接的方式吗？甚至是Angular组件的丑陋黑客？

额外信息:我正在使用https://materialdesignicons.com上的mdi.svg图标库来获取我的Angular项目的其他图标.但是,要使用这些,我必须使用该属性.svgIcon