更新:我現在已經使兩者完全相同。我的npm run lite和Plunker版本的本地版本是100%相同的,但我的本地版本沒有獲得佔位符文本。mdInput的佔位符文本不可見(Angular2的材料設計)
我有一個很大的Angular2(2.4.9)應用程序,我開始使用Google的@ angular/material(2.0.0-beta.2) - 特別是他們的mdInput。
我注意到佔位符文本是不可見的,除非我添加像input::-webkit-input-placeholder{ color:black;}
這樣的css,但是當用戶在字段中單擊時(動畫開始時將其移動到輸入上方浮動時)它不會消失,用戶開始輸入時消失。
然後,我拉開我的非常大的應用程序儘可能最小的例子,所以我可以發佈一個這樣的笨蛋。本地運行的版本和Plunker版本現在是100%相同的。
那麼爲什麼Plunker的例子工作,但不是我的本地版本?
這裏是所有分歧(更新後,沒有分歧依然存在Plunker和本地版本之間。):
app.component.ts: (移動的文件出子目錄和直接服務,不從build文件夾Plunker和地方現在identcal)
的index.html: (更新等等這些都是現在相同,問題依然存在)
systemjs.config.js: (已更新,所以這些現在是相同的。將組件移到根目錄以匹配Plunker。問題仍然是)在我的文件
包部分:。 (更新所以他們現在一樣)
完全plunker文件:
app.component.html:
<div>
<md-input-container>
<input mdInput placeholder="Favorite food">
</md-input-container>
<div>
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app',
templateUrl:'./app.component.html'
})
export class AppComponent {
}
個
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import {MaterialModule } from '@angular/material';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
HttpModule,
MaterialModule,
],
declarations: [
AppComponent
],
providers: [
],
bootstrap: [AppComponent]
})
export class AppModule { }
的index.html
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/2.0.3/typescript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
<link href="https://unpkg.com/@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
</head>
<body>
<app>Loading...</app>
</body>
</html>
main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule)
.then(success => console.log("Bootstrap success"))
.catch(err => console.log(err));
systemjs.config 。JS
(function (global) {
System.config({
transpiler: 'typescript',
typescriptOptions: {
emitDecoratorMetadata: true
},
// map tells the System loader where to look for things
map: {
'app':'.',
// Angular specific mappings.
'@angular/core': 'https://unpkg.com/@angular/core/bundles/core.umd.js',
'@angular/common': 'https://unpkg.com/@angular/common/bundles/common.umd.js',
'@angular/compiler': 'https://unpkg.com/@angular/compiler/bundles/compiler.umd.js',
'@angular/http': 'https://unpkg.com/@angular/http/bundles/http.umd.js',
'@angular/forms': 'https://unpkg.com/@angular/forms/bundles/forms.umd.js',
'@angular/router': 'https://unpkg.com/@angular/router/bundles/router.umd.js',
'@angular/platform-browser': 'https://unpkg.com/@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'https://unpkg.com/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/material': 'https://unpkg.com/@angular/material/bundles/material.umd.js',
// Rxjs mapping
'rxjs': 'https://unpkg.com/rxjs',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
'.': {
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
嗨..你能標記爲答案?這是正確的答案!謝謝! – mariomol
是的!對不起 - 完成 – WillyC