mdInput 的占位符文本不可见(Angular2 的 material 设计)
Placeholder text not visible for mdInput (material design for Angular2)
更新:我现在已经把两者完全一致了。我的本地版本使用 npm 运行 lite 和 Plunker 版本 100% 相同,但我的本地版本没有获得占位符文本。
我有一个大型 Angular2 (2.4.9) 应用程序,我开始使用 Google 的 @angular/material (2.0.0-beta.2) - 特别是他们的 mdInput。
我注意到占位符文本是不可见的,除非我像 input::-webkit-input-placeholder{ color:black;}
添加 css,但是当用户点击字段时它不会消失(当动画开始移动它时浮动在输入上方),它只会在用户开始输入时消失。
然后我将我非常大的应用程序分开,以获得尽可能小的示例,这样我就可以 post 对此进行深入研究。 运行ning 本地版本和 Plunker 版本现在 100% 相同。
那么为什么 Plunker 示例有效而我的本地版本无效?
以下是所有差异(更新后,Plunker 和本地版本之间没有差异。):
app.component.ts:
(将文件移出子目录并直接提供,而不是从构建文件夹提供。Plunker 和本地现在是相同的)
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);
好的 - 回答我自己的问题以防其他穷人遇到这个问题。
我错过了两者之间的一件事。在任何其他情况下都没有区别的一件事,我能找到的唯一症状是我没有在 mdInput 上获得占位符文本。
在我的 index.html 文件的顶部,我需要这个:
<!DOCTYPE html>
我在创建 github 存储库以共享和显示问题时发现了这一点。
我知道这是必需的 - 我很惊讶我能走到这一步,这是我 运行 遇到的唯一问题。就这样烧了一天!希望我能从同样的命运中拯救另一个人...
如果您不包含动画模块,也会出现此问题,例如 (以防万一其他人到达此处并且上述解决方案无法解决问题)。
更新:我现在已经把两者完全一致了。我的本地版本使用 npm 运行 lite 和 Plunker 版本 100% 相同,但我的本地版本没有获得占位符文本。
我有一个大型 Angular2 (2.4.9) 应用程序,我开始使用 Google 的 @angular/material (2.0.0-beta.2) - 特别是他们的 mdInput。
我注意到占位符文本是不可见的,除非我像 input::-webkit-input-placeholder{ color:black;}
添加 css,但是当用户点击字段时它不会消失(当动画开始移动它时浮动在输入上方),它只会在用户开始输入时消失。
然后我将我非常大的应用程序分开,以获得尽可能小的示例,这样我就可以 post 对此进行深入研究。 运行ning 本地版本和 Plunker 版本现在 100% 相同。
那么为什么 Plunker 示例有效而我的本地版本无效?
以下是所有差异(更新后,Plunker 和本地版本之间没有差异。):
app.component.ts: (将文件移出子目录并直接提供,而不是从构建文件夹提供。Plunker 和本地现在是相同的)
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);
好的 - 回答我自己的问题以防其他穷人遇到这个问题。
我错过了两者之间的一件事。在任何其他情况下都没有区别的一件事,我能找到的唯一症状是我没有在 mdInput 上获得占位符文本。
在我的 index.html 文件的顶部,我需要这个:
<!DOCTYPE html>
我在创建 github 存储库以共享和显示问题时发现了这一点。
我知道这是必需的 - 我很惊讶我能走到这一步,这是我 运行 遇到的唯一问题。就这样烧了一天!希望我能从同样的命运中拯救另一个人...
如果您不包含动画模块,也会出现此问题,例如