angular - 在 Angular 4.0.0-rc.1 中使用 Angular Material 2 Tabs 组件

Question

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

当我切换标签时，内容相互重叠。

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

谁能指导如何克服这个问题，同时该 Material 增加了对 Angular 4 的支持？

Answer 1

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

根据 changelog

Animation Package

We have pulled Animations into their own package. This means that if you don’t use Animations, this extra code will not end up in your production bundles. This also allows you to more easily find documentation and to take better advantage of autocompletion. If you do need animations, libraries like Material will automatically import the module (once you install it via NPM), or you can add it yourself to your main 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 Example