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

问题描述：

我最近更新了我的项目，从Angular 2.4.6到Angular 4.0.0-rc.1，之后Angular 2 Material 2 Tab组件看起来不像正常工作。使用Angular Material 2 Tabs Component with Angular 4.0.0-rc.1

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

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

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

答

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

Accordignly到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/[email protected]/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

的CDK

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

2）谢谢你这么多yurzui。在运行构建时使用角度cli - 产品 - 不是我收到以下错误，请引导？ UglifyJs vendor.e60455e679cd619355b7.bundle.js中的错误语法错误：意外的标记：name（AnimationEngine）[vendor.e60455e679cd619355b7.bundle.js：28085,6] –

您使用的是什么angular-cli版本？你用'v1.0.0-rc.0'试过了吗？ https://github.com/angular/angular-cli/blob/master/CHANGELOG.md#100-rc0-2017-02-25 – yurzui

是的我正在使用@ angular/cli：1.0.0-rc.0 –

答

1）安装材料，动画和你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

相关推荐