标签: angular-material2

我正在写一个角度应用程序,我想要Angular Material Tabs进行导航.我的问题是当我点击一个标签时,它实际上在路线之间切换但是标签中的样式没有变化,所以看起来活动标签仍然是另一个.

我的代码:

<nav md-tab-nav-bar>
  <a md-tab-link
     [routerLink]="['/page1']"
     routerLinkActive #rla="routerLinkActive"
     [active]="rla.isActive">
    Page1
  </a>
  <a md-tab-link
     [routerLink]="['/page2']"
     routerLinkActive #rla="routerLinkActive"
     [active]="rla.isActive">
    Page2
  </a>
</nav>

<router-outlet></router-outlet>

所以这是我的主要组件,其中包含标题,侧边栏和内容

<md-sidenav-container>

  <app-navigation></app-navigation>
  <app-header></app-header>


  <div class="app-content app-content-layout">
    <router-outlet></router-outlet>
  </div>

</md-sidenav-container>

app-header只包含一个基本的md-toolbar视图,其中包含一个用于切换侧边栏的按钮

<md-toolbar>
  <button class="app-icon-button-toggle" (click)="navToggle()">
    <i class="material-icons app-toolbar-menu">menu</i>
  </button>
<md-toolbar>

这是逻辑或app-header的组件

export class HeaderComponent implements OnInit {

  @Output() toggleSideNav = new EventEmitter<boolean>();
  navToggle() {
    this.toggleSideNav.emit(true);
  }
}

然后我试试这个

<app-navigation></app-navigation>
<app-header (navToggle)="app-navigation.toggle()"></app-header>

当然它不起作用导致它的愚蠢,但我不知道该怎么做.这是我遵循的参考.https://github.com/angular/material2/issues/2936

所以基本上md-sidenav是位于app-navigation组件.我想切换md-sidenav使用app-header组件.我用的是@Output,EventEmitter但它不起作用.相信我,我做了一切工作,我也使用服务方法.

//这是shared.service

@Injectable()
export class SharedService{
    public sidenav: any;

}

//这是使用Service方法的app-header components interactions.

template: '<button class="app-icon-button-toggle" (click)="toggleNav()">
               <i class="material-icons app-toolbar-menu">menu</i>
           </button>';

export …

我一直在尝试在我的项目中插入一些md-chip元素。我得到的只是“ md-chip-list不是一个已知元素”。

HTML：

<md-chip-list>
    <md-chip *ngFor="let dependency of externalDependencies" color="primary" class="chip">
        {{dependency.name}}
    </md-chip>
</md-chip-list>

如其他答案所示，我已经导入了MdChipsModule：

import { MdChipsModule } from '@angular/material';

如果我省略md-chip-list标签，代码可以工作，但是格式不符合预期。我是Angular Material的新手，所以我非常感谢您的帮助。

我在Angular中有Datepicker元素.它是Material Design的标准组件.

当我尝试为此元素设置自己的样式时,它不适用于属性!important.

如何解决它,以及如何更改默认组件的样式？

代码示例:

.mat-datepicker-toggle {
  margin-right: 10px !important;
}

我正在做一个有角度的项目，我已经实现了诸如侧边导航这样的有角度的材质组件。side-nav具有ul li元素，其中的链接是嵌套的，而路由器链接不是href。我的问题是，当我选择一个链接转到另一个视图时，我想调用side nav来切换和关闭。因为它总是打开

在Angular Material docs中,md-select具有键盘交互:向上箭头选择上一个选项,向下箭头选择下一个选项,空格/输入选择选项.我需要禁用此键盘交互.有没有办法禁用它？

我正试图在我的角度项目中使用我的自定义主题.它没有按预期工作,我收到以下错误:

./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader?{"ident":"postcss"}!./src/custom_theme.scss
Module not found: Error: Can't resolve '@angular/material/theming' in '/Users/mathiasschrooten/Downloads/skylux-admin/src'

我的styles.css文件:

@import "custom_theme.scss"

.mat-tab-label {
  flex: 1 1 auto;
}

我的custom_theme.scss文件:

@import '~@angular/material/theming';
@include mat-core();

$candy-app-primary: mat-palette($mat-orange);
$candy-app-accent:  mat-palette($mat-orange, A200, A100, A400);

$candy-app-warn:    mat-palette($mat-red);

$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-
accent, $candy-app-warn);

@include angular-material-theme($candy-app-theme);

.angular-cli.json

      "styles": [
    "styles.css",
    "custom_theme.scss"
  ],

提前致谢!

我刚刚开始学习Angular 4.我收到以下错误

Uncaught TypeError: Object(...) is not a function
    at eval (bidi.es5.js:70)
    at eval (bidi.es5.js:72)
    at Object../node_modules/@angular/cdk/esm5/bidi.es5.js (vendor.bundle.js:39)
    at __webpack_require__ (inline.bundle.js:55)
    at eval (core.es5.js:57)
    at Object../node_modules/@angular/material/esm5/core.es5.js (vendor.bundle.js:255)
    at __webpack_require__ (inline.bundle.js:55)
    at eval (autocomplete.es5.js:15)
    at Object../node_modules/@angular/material/esm5/autocomplete.es5.js (vendor.bundle.js:191)
    at __webpack_require__ (inline.bundle.js:55)

还有一堆像这样的警告

./node_modules/@angular/material/esm5/datepicker.es5.js
107:59-75 "export 'defineInjectable' was not found in '@angular/core'
 @ ./node_modules/@angular/material/esm5/datepicker.es5.js
 @ ./node_modules/@angular/material/esm5/material.es5.js
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://0.0.0.0:0 ./src/main.ts

./node_modules/@angular/cdk/esm5/a11y.es5.js
1118:164-170 "export 'inject' was not found in '@angular/core'
 @ ./node_modules/@angular/cdk/esm5/a11y.es5.js
 @ ./node_modules/@angular/material/esm5/bottom-sheet.es5.js
 @ ./node_modules/@angular/material/esm5/material.es5.js
 @ ./src/app/app.module.ts
 @ ./src/main.ts …

我试图实现angular MatSelectionList并尝试使用API selectionChange监听选定的选项事件,但它没有触发任何事件.

https://stackblitz.com/edit/angular-eyjdfp?file=app%2Flist-selection-example.html

我做错了什么或者在释放角度6时有什么破坏？

使用:Angular 6.0.1版本

Chrome浏览器

使用Angular 7我将材质表添加到我的应用程序中 ng generate @angular/material:table test-table

在生成的模板内有一个分页器：

<mat-paginator #paginator
    [length]="dataSource.data.length"
    [pageIndex]="0"
    [pageSize]="50"
    [pageSizeOptions]="[25, 50, 100, 250]">
</mat-paginator> 

在初始化时，数据源已更改：

ngOnInit() {
  this.dataSource = new ItemsTableDataSource(
    this.paginator,
    this.sort,
    this.route.paramMap,
    this.afs
 );
}

尝试在Karma上编译组件时，expect(component).toBeTruthy();出现以下错误

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has 
changed after it was checked. Previous value: 'length: 0'. Current 
value: 'length: 1'.

我该如何解决这个问题？