Angular 2打开兼容模式

Question

我需要为Angular Material 2生成自定义主题.但是Angula 2团队提供的教程包括scss文件的以下代码:

@import '../../node_modules/@angular/material/core/theming/_all-theme';
@include mat-core(); $primary: mat-palette($mat-orange, 800);
$accent: mat-palette($mat-light-blue, 600, A100, A400);
$warn: mat-palette($mat-red, 600);
$theme: mat-light-theme($primary, $accent, $warn);

@include angular-material-theme($theme);

生成前缀为.mat的 CSS类,我相信元素的材料v1表示法？

所以我决定使用mat-card和其他组件,但是当我这样做时,angular 2给了我这个错误

"mat-"前缀不能用于ng-material v1兼容模式.

任何帮助如何A)打开兼容模式B)生成主题的另一种方式？

Answer 1

更新:

从2.0.0-beta.11开始,md-前缀已被完全弃用,mat-前缀应该用于前进.

如果您使用的版本低于2.0.0-beta.11,那么只有当您的项目与Angular Material 2并排使用AngularJS Material时,这才会成为问题.

如果您没有在项目中使用AngularJS Material,只需使用md-前缀,就不会出现兼容性问题(也就是CSS冲突).

解:

如果您的项目使用AngularJS Material AND Angular 2 Material,则需要避免CSS冲突:

导入NoConflictStyleCompatibilityMode应用程序的根模块.

import { NoConflictStyleCompatibilityMode } from '@angular/material'

@NgModule({
    ...,
    imports: [NoConflictStyleCompatibilityMode]
})
export class AppModule {}

然后使用md-前缀Angularjs材料元件和mat-前缀角材料2组的元素.

兼容模式@angular/material允许组件(带前缀md-)与AngularJS Material组件并排存在,不会发生任何CSS冲突.

启用后,兼容模式会强制所有模板API使用前缀mat-而不是md-.这将阻止AngularJS Material中的任何CSS 影响其中的组件@angular/material.

在此处找到此文档.