使用Angular材料2个TABS组件，具有Angular 4.0.0-rc.1

Question

我最近将我的项目从Angular 2.4.6更新为Angular 4.0.0.0-rc.1之后，Angular 2材料2 Tab组件似乎无法正常工作。

当我切换选项卡时，内容彼此重叠。

显然是因为最新的RC引入和弃用和模板属性。

任何人都可以指导如何克服这个问题，而材料增加了对Angular 4的支持？

Answer 1

因为动画不适用于当前配置。

符合ChangElog

动画包

我们将动画纳入了自己的包装。这意味着如果 您不使用动画，此额外的代码不会最终出现在您的 生产包。这也使您可以更轻松地找到 文档并更好地利用自动完成。如果你 确实需要动画，材料之类的库将自动导入 模块（通过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示例

Answer 2

1）安装材料，动画和CDK

npm install --save @angular/material @angular/cdk @angular/animations

2）在您的app.module.ts

中

import {MatTabsModule} from '@angular/material/tabs';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule, 
    MatTabsModule 
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }