使用Angular Material 2 Tabs Component with Angular 4.0.0-rc.1

Question

我最近将我的项目从Angular 2.4.6更新到Angular 4.0.0-rc.1,之后Angular 2 Material 2 Tab组件似乎无法正常工作.

当我切换标签时,内容相互重叠.

显然是因为,最新的RC介绍和弃用以及模板属性.

任何人都可以指导如何克服这个问题,而材料添加支持Angular 4？

Answer 1

这是因为动画不适用于当前配置.

不经意地改变了日志

动画包

我们已将动画添加到自己的包中.这意味着如果您不使用动画,则此额外代码不会最终出现在您的生产包中.这也使您可以更轻松地查找文档并更好地利用自动完成功能.如果你确实需要动画,像Material这样的库会自动导入模块(一旦你通过NPM安装它),或者你可以自己添加到你的主NgModule.

那么我们需要做什么？

1) npm i --save @angular/animations

2)添加BrowserAnimationsModule到导入数组@NgModule

import { MatTabsModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports:      [ BrowserModule, BrowserAnimationsModule, MatTabsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

如果你使用systemjs,那么不要忘记配置:

'@angular/animations': 'npm:@angular/animations@next/bundles/animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',

Plunker示例