Angular2 mdInput单击焦点问题

Question

我有一个Angular2 Material mdInput字段，由于某种原因，占位符文本不会消失，输入文本区域在单击时不会聚焦。

<form class="create-taskitem-form" (ngSubmit)="submitNewTask()" novalidate>
    <md-input-container class="create-task-item">
      <input mdInput
       [(ngModel)]="taskListTitle"
       (keyup.escape)="clearNewTask()"
       name="taskListTitle"
       autocomplete="off"
       [placeholder]="newItemPlaceholder"
       type="text">
    </md-input-container>
</form>

当它不起作用时，占位符不会消失，字段不会聚焦，但我可以输入：

奇怪的是，一旦我调整浏览器的大小，它就会 工作并进入正确的焦点状态：

还有一个奇怪的是我有一个嵌套的子组件，它可以正常工作。这是他们的根模块：

import 'hammerjs';

@NgModule({
  imports: [
    CommonModule,
    TasksRoutingModule,
    ContentEditableModule,
    ReactiveFormsModule, 
    FormsModule, 
    MaterialModule
  ],
  exports: [
    TasksRoutingModule
  ],
  providers: [
    TasklistTypes
  ],
  declarations: [TasklistCollectionComponent, TasklistComponent, TaskItemComponent]
})
export class TasksModule { }

Answer 1

尝试删除占位符周围的括号。

...
 placeholder="New list"
...

Answer 2

某些东西没有在Angular中注册，所以我只是在输入字段上发生focus()或blur()事件时运行了一个区域，并修复了它（暂时）：

<md-input-container class="create-task-item">
      <input mdInput
        (blur)="onBlur()" 
        (focus)="onFocus()"
        [(ngModel)]="taskListTitle"
        (keyup.escape)="clearNewTaskList()"
        name="taskListTitle"
        autocomplete="off"
        [placeholder]="newItemPlaceholder"
        type="text">
</md-input-container>

在我的组件中：

onBlur(){
    this.zone.run(() => {});
  }

onFocus(){
    this.zone.run(() => {});
}