标签: angular2-mdl

我正在尝试使用angular2-mdl和angular-cli.我MdlModule在app.module.ts中导入.

当我尝试使用时<mdl-textfield type="text" label="Text..." floating-label></mdl-textfield>,它会出错:

ctorParameters.map不是angular2-mdl中的函数

我不知道该怎么做.

这是我的angular-cli.json.

  "dependencies": {
    "@angular/common": "~2.0.0",
    "@angular/compiler": "~2.0.0",
    "@angular/core": "~2.0.0",
    "@angular/forms": "~2.0.0",
    "@angular/http": "~2.0.0",
    "@angular/material": "^2.0.0-alpha.9-3",
    "@angular/platform-browser": "~2.0.0",
    "@angular/platform-browser-dynamic": "~2.0.0",
    "@angular/router": "~3.0.0",
    "@types/moment-timezone": "^0.2.33",
    "angular-cli": "^1.0.0-beta.17",
    "angular2-jwt": "^0.1.25",
    "angular2-mdl": "^2.9.0",
    "bootstrap": "^3.3.7",
    "bourbon": "^4.2.7",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "moment": "^2.17.1",
    "moment-timezone": "^0.5.10",
    "node-sass": "^3.13.0",
    "primeng": "^1.1.0",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.6.23"
  },
  "devDependencies": {
    "@types/jasmine": "^2.2.30",
    "@types/moment": "^2.13.0",
    "@types/moment-timezone": "^0.2.33",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.17",
    "bootstrap-sass": "^3.3.7",
    "codelyzer": …

使用angular2-mdl的演示项目作为指南，我移植了tab组件并尝试如下实现：

import { Component } from '@angular/core';

@Component({
    selector: 'my-dashboard',
    templateUrl: './landing.my.html'
})
export class MyDashboard {
    public activeIndex = 0;

    public tabChanged({index}): void {
        this.activeIndex = index;
    }

}

模板是：

<mdl-tabs mdl-ripple mdl-tab-active-index="0" (mdl-tab-active-changed)="tabChanged($event)">
    <mdl-tab-panel mdl-tab-panel-title="home">
        <mdl-tab-panel-title>
            <mdl-icon class="mdl-color-text--primary">home</mdl-icon><span>Home</span>
        </mdl-tab-panel-title>
        <mdl-tab-panel-content>
            <ul>
                <li>Stanis</li>
                <li>Joffrey</li>
            </ul>
        </mdl-tab-panel-content>
    </mdl-tab-panel>
    <mdl-tab-panel mdl-tab-panel-title="something">
        <mdl-tab-panel-title>
            <mdl-icon class="mdl-color-text--primary">group_work</mdl-icon><span>Ontology</span>
        </mdl-tab-panel-title>
        <mdl-tab-panel-content>
            <ul>
                <li>Stanis</li>
                <li>Joffrey</li>
            </ul>
        </mdl-tab-panel-content>
    </mdl-tab-panel>
    <mdl-tab-panel mdl-tab-panel-title="another">
        <mdl-tab-panel-title>
            <mdl-icon class="mdl-color-text--primary">list</mdl-icon><span>Cognitive</span>
        </mdl-tab-panel-title>
        <mdl-tab-panel-content>
            <ul>
                <li>Robert</li>
            </ul>
        </mdl-tab-panel-content>
    </mdl-tab-panel>
    <mdl-tab-panel mdl-tab-panel-title="else">
        <mdl-tab-panel-title> …

• 什么是angular2-mdl？
• 为什么angular2-mdl存在？
• 我在哪里可以找到来源？
• 我在哪里可以找到演示？
• 是否可以通过npm安装？

我在使用angular2-mdl包启动Angular2项目时遇到了一些问题.

我的项目设置是使用angular-cli(webpack) - https://github.com/angular/angular-cli

我试图整合谷歌材质设计精简版(https://getmdl.io/started/index.html使用angular2-MDL包()https://www.npmjs.com/package/angular2-mdl).

angular2-mdl设置步骤非常简单:

npm install angular2-mdl --save

显然就是这样......它应该有效.但事实并非如此.我已经到了使用MDL的组件正确设置样式的点,但动画的JavaScript根本不会触发.我理解这是因为MDL在Angular加载它们之前正在扫描页面中的DOM元素,所以尝试了在SO上宣传的"刷新DOM"修复,但它对我不起作用:

ngAfterViewInit(){
    console.log("HeaderComponent.ngAfterViewInit");
    componentHandler.upgradeAllRegistered();
}

控制台中没有错误,样式工作和javascript没有.我想知道是否有人有这种设置/类似问题的经验？

Ps我是Angular2的新手,并且真的不喜欢每个环境设置似乎都有差异...有些使用webpack,有些使用systemjs,不同的生成器工具等等......我一个人在这里吗？!

谢谢

我想显示文本后跟一个图标。
我正在使用材质图标。

我想实现左边的目标。但右边是我得到的。

我尝试了填充、边距、行高等一切，但无法使它们对齐。

上述问题的工作网页在这里

网页

                <div class="package-rating-detail">
                    <label>{{package.rating}}</label>
                    <mdl-icon class="mdl-color-text--orange">star_rate</mdl-icon>
                </div>

CSS

.package-rating-detail {
    float: left;
    margin-left: 20px;
}

那么如何对齐标签和图标呢？