使用md-input-container时出错

时间:2016-12-17 15:32:10

标签: angular angular-material2

我根据链接https://github.com/angular/material2/blob/master/GETTING_STARTED.md创建了一个Angular 2素材应用。

我可以使用<md-card>, <md-toolbar>, <md-input>等。但是当我使用<md-input-container>时,它会抛出错误

zone.js:388 Unhandled Promise rejection: Template parse errors:
'md-input-container' is not a known element:

以下是packages.json,

的详细信息
"dependencies": {
    "@angular/common": "~2.1.0",
    "@angular/compiler": "~2.1.0",
    "@angular/core": "~2.1.0",
    "@angular/forms": "~2.1.0",
    "@angular/http": "~2.1.0",
    "@angular/material": "^2.0.0-alpha.11-3",
    "@angular/platform-browser": "~2.1.0",
    "@angular/platform-browser-dynamic": "~2.1.0",
    "@angular/router": "~3.1.0",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "ng2-file-upload": "^1.1.4-2",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.6.23"
  },

我如何解决这个问题?

https://github.com/angular/material2/tree/master/src/lib/input表示不推荐使用md-input并使用md-input-container。

2 个答案:

答案 0 :(得分:4)

这对我有用。

app.module.ts

import { MaterialModule } from '@angular/material';
...
@NgModule({
imports: [
MaterialModule
]
})

app.component.html

<md-input-container>
<input mdInput placeholder="Favorite food" value="Sushi">
</md-input-container>

这里的关键是确保将其添加到index.html的头部。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

答案 1 :(得分:3)

我认为它可能还不行,因为那些changes尚未发布2.0.0-alpha.11

https://github.com/angular/material2/compare/2.0.0-alpha.11...master

我们将不得不等到npm的下一个发布才能合并,但我不确定。