Question

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

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

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

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

Answer 1

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

无关

动画包

我们已将Animations拉入自己的套餐中。这意味着如果   你不使用动画，这个额外的代码不会在你的   生产包。这也让您更容易找到   文档并更好地利用自动完成功能。如果你   确实需要动画，像材料这样的库会自动导入   模块（通过NPM安装后），或者您可以自己添加   到你的主要NgModule。

那么我们需要做什么？

1）BrowserAnimationsModule

2）将@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 { }

的导入数组中

'@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',

如果您使用systemjs，请不要忘记config：

{{1}}

<强> Plunker Example

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 { }

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

2 个答案: