mdInput的占位符文本不可见(Angular2的材料设计)
更新:我现在已经使两者完全相同。我的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);
OK - 回答我的问题的情况下,其他一些贫穷的人运行到这一点。
我错过了两者之间的一件事。有一件事在其他情况下没有任何区别,唯一的症状是我没有在mdInput上获得占位符文本。
在我的index.html文件的顶部,我需要这样的:
<!DOCTYPE html>
我发现这同时创造一个GitHub库共享和显示问题。
我知道这是必需的 - 我只是感到惊讶我得到了这么多,这是我遇到的唯一问题。烧了这一天!希望我救了另一个人从相同的命运...
嗨..你能标记为答案?这是正确的答案!谢谢! – mariomol
是的!对不起 - 完成 – WillyC