Question

更新：我现在已经完全相同了。我的本地版本使用npm run lite和Plunker版本提供100％相同，但我的本地版本没有获得占位符文本。

我有一个很大的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 ：（将文件移出子目录并直接提供，而不是从构建文件夹中提取.Pulnker和local现在是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);

Answer 1

好的 - 回答我自己的问题，以防其他一些穷人遇到这个问题。

我在两者之间错过了一件事。有一点在任何其他情况下没有任何区别，我能找到的唯一症状是我没有在mdInput上获得占位符文本。

在我的index.html文件的顶部，我需要这个：

<!DOCTYPE html>

我在创建github repo时发现了这一点，以便分享并显示问题。

我知道这是必须的 - 我很惊讶我走到这一步，这是我遇到的唯一问题。烧了一天这个！希望我能从同一个命运中拯救另一个人......

Answer 2

如果您不包含动画模块，也会出现此问题，例如在this thread中（以防万一其他人到达此处并且上述解决方案无法解决问题）。

占位符文本对于mdInput不可见（Angular2的材质设计）

2 个答案: