0
我已經將Angular 2中的材質設計項目更新爲Angular 4,現在我遇到了一個非常奇怪的問題:在所有瀏覽器,除Mac上的FireFox外,佔位符和文本在輸入字段中不可見。從Angular 2更新到Angular 4後,md-input-container(Material Design)無法工作
這是它的外觀在Chrome: App in Chrome
,這是它的外觀在Firefox在Mac上: App in FireFox
當我運行應用程序,我沒有得到任何錯誤。
這是我的systemjs.config.js樣子:
(function (global) {
System.config({
paths: {
'npm:': 'node_modules/'
},
map: {
Application: 'bin-debug',
// angular bundles
'@angular/cdk': 'npm:@angular/cdk/bundles/cdk.umd.js',
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/material': 'npm:@angular/material/bundles/material.umd.js',
'@angular/animations': 'npm:@angular/animations/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',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
// CDK individual packages
'@angular/cdk/platform': 'npm:@angular/cdk/bundles/cdk-platform.umd.js',
'@angular/cdk/a11y': 'npm:@angular/cdk/bundles/cdk-a11y.umd.js',
// other libraries
'rxjs': 'npm:rxjs'
},
packages: {
Application: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
main:'./bundles/rx.min.js', defaultExtension: 'js'
}
}
});
})(this);
,這是我的package.json:
{
"name": "testApp",
"version": "0.0.1",
"dependencies": {
"@angular/animations": "^4.3.2",
"@angular/cdk": "^2.0.0-beta.8",
"@angular/common": "^4.3.2",
"@angular/compiler": "^4.3.2",
"@angular/compiler-cli": "^4.3.2",
"@angular/core": "^4.3.2",
"@angular/forms": "^4.3.2",
"@angular/http": "^4.3.2",
"@angular/material": "^2.0.0-beta.8",
"@angular/platform-browser": "^4.3.2",
"@angular/platform-browser-dynamic": "^4.3.2",
"@angular/platform-server": "^4.3.2",
"@angular/router": "^4.3.2",
"@angular/upgrade": "^4.3.2",
"@types/core-js": "^0.9.42",
"@types/hammerjs": "^2.0.34",
"@types/node": "^8.0.17",
"core-js": "^2.4.1",
"grunt": "^1.0.1",
"grunt-contrib-clean": "^1.1.0",
"grunt-contrib-copy": "^1.0.0",
"grunt-shell": "^2.1.0",
"hammerjs": "^2.0.8",
"load-grunt-tasks": "^3.5.2",
"reflect-metadata": "^0.1.10",
"rollup": "^0.45.2",
"rollup-plugin-commonjs": "^8.0.2",
"rollup-plugin-node-resolve": "^3.0.0",
"rollup-plugin-uglify": "^2.0.1",
"rxjs": "^5.4.2",
"systemjs": "^0.20.17",
"tslint": "^5.5.0",
"typescript": "^2.4.2",
"zone.js": "^0.8.16"
}
}
是否有人有任何想法是怎麼回事?我一直在研究這個問題很長一段時間,而且我已經沒有想法了。
以下是關於組件的實現更多的代碼: 的Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Register CME - Pegasus Lectures</title>
<base href="/">
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
<link href="https://gitcdn.link/repo/angular/bower-material/master/angular-material.css" rel="stylesheet">
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/hammerjs/hammer.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('Application').catch(function (err) {
console.error(err);
});
</script>
</head>
<body>
<nl-ixms-app>Loading...</nl-ixms-app>
</body>
</html>
ApplicationModule.ts
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';
import { MdInputModule } from '@angular/material';
import { Application } from './components/Application';
@NgModule({
bootstrap: [ Application ],
declarations: [
Application
],
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
HttpModule,
MdInputModule
],
providers: [
]
})
export class ApplicationModule {}
Application.ts
import { ChangeDetectionStrategy, Component } from '@angular/core';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
moduleId: 'src/application/components/a',
providers: [ ],
selector: 'nl-ixms-app',
styleUrls: [ './Application.css' ],
templateUrl: './Application.html'
})
export class Application {
//----------------------------------------------------------------------------
//
// Constructor
//
//----------------------------------------------------------------------------
constructor() { }
//----------------------------------------------------------------------------
//
// LifyCycle Methods
//
//----------------------------------------------------------------------------
//-----------------------------------
// ngOnInit
//-----------------------------------
//noinspection JSUnusedGlobalSymbols
public ngOnInit(): void {
console.log('Application ready');
}
}
而且一個很小的應用.html
<md-input-container>
<input placeholder="email address"
mdInput
required
#email
type="email"
name="email">
</md-input-container>
你介意在你的視圖中添加如何實現組件的片段嗎? – JSess
由於您從Angular 2移動到4,意味着您在Material版本中也有了很大的提升,與Angular2的最新兼容材料是beta 2,當前版本是beta 8.檢查您是否正在導入模塊[正確方式](https ://material.angular.io/guide/getting-started),如果你使用的是預編譯的主題css文件的當前版本。 – Nehal
看起來你不應該把'cdk-builds'主版本與'@ angular/material'版本混合在一起,如果你想從'master'安裝,你應該運行'npm install angular/material2-builds'。 – Edric