如何将 md 开关添加到角度 4

Question

我想将 AngularJS 材质的 md-switch 添加到我的 angular4 项目中，但出现以下错误：

Uncaught Error: Template parse errors:
'md-switch' is not a known element:
1. If 'md-switch' is an Angular component, then verify that it is part of this module.
2. If 'md-switch' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message

====

=================================

更新

test.component.html：

<md-slide-toggle>Slide me!</md-slide-toggle>

test.component.ts：

@Component({
selector: 'test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})

test.module.ts

import { MaterialModule, MdButtonModule, MdSlideToggleModule} from '@angular/material';
import { NgModule } from '@angular/core';
import { TestComponent } from './test.component';
@NgModule({
declarations: [
TestComponent
],
imports: [
MaterialModule, MdSlideToggleModule,
],
})
export class TestModule { }

包.json

{
"name": "web-app",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^4.0.0",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/material": "^2.0.0-beta.7",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@angular/cli": "1.1.3",
"@angular/compiler-cli": "^4.0.0",
"@angular/language-service": "^4.0.0",
"@types/jasmine": "2.5.45",
"@types/node": "~6.0.60",
"codelyzer": "~3.0.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.0.4",
"tslint": "~5.3.2",
"typescript": "~2.3.3"
}
}

我错过了什么？

Answer 1

您正在使用 angular1 lib 文档来制作 angular2 模块...

如果您已经安装了此存储库，只需将所需的功能从材料导入到模块，否则安装包：

npm install @angular/material

不要忘记在所选模块中包含功能组件模块：

test.module.ts：

import {MatSlideToggleModule} from '@angular/material/slide-toggle';
imports:      [ MatSlideToggleModule,

test.component.html：

<mat-slide-toggle>Slide me!</mat-slide-toggle>

test.component.ts：

import {Component} from '@angular/core';
@Component({
selector: 'test',
templateUrl: './test.component.html',
})
export class testComponent{}

Answer 2

首先，angularjs 材料与角度 4 不兼容，而是使用角度材料 2。而在添加角材料之前，请检查这个问题：

https://github.com/angular/material2/issues/4137

在有角的材料中不会发生摇树。即使您使用一个模块，它也会导入所有内容，并且会增加构建大小，从而降低性能。因此，我建议使用任何其他库或编写自己的自定义css。

您可以使用的一些资料库包括：

• 总理吴
• Md2 by promact