将Angular2与Material Design Lite一起使用 [英] Using Angular2 With Material Design Lite

问题描述

我正在学习Angular2，但在将Angular2与MDL结合使用时遇到问题. 为什么MDL导航栏不能与Angular2一起使用?当我将导航栏与页眉和抽屉一起使用时，抽屉无法使用，因此无法单击它，也看不到抽屉的图标. 还有另一个问题:文本字段也无法正常工作.我想使用mdl-textfield--expandable(搜索)，但是当我单击此搜索字段时，它没有扩展.但是，如果没有Angular2，它就可以正常工作.

I am learning Angular2 but I have problem about using Angular2 with MDL. Why MDL navigation bar is not working with Angular2? When I use Navigation bar with header and drawer, drawer is not working so I cannot click on it, I cannot see drawer's icon. There is another problem: textfields also is not working correctly. I want to use mdl-textfield--expandable (Search) but when I click on this search field it is not expanding. However, without Angular2 it is working fine.

更新

<div class="demo-layout-waterfall mdl-layout mdl-js-layout">
    <header class="mdl-layout__header mdl-layout__header--waterfall">
        <!-- Top row, always visible -->
        <div class="mdl-layout__header-row">
            <!-- Title -->
            <span class="mdl-layout-title">Title</span>
            <div class="mdl-layout-spacer"></div>



            <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
                  mdl-textfield--floating-label mdl-textfield--align-right">
                <label class="mdl-button mdl-js-button mdl-button--icon" for="waterfall-exp">
                    <i class="material-icons">search</i>
                </label>
                <div class="mdl-textfield__expandable-holder">
                    <input class="mdl-textfield__input" type="text" name="sample" id="waterfall-exp">
                </div>
            </div>


        </div>
        <!-- Bottom row, not visible on scroll -->
        <div class="mdl-layout__header-row">
            <div class="mdl-layout-spacer"></div>
            <!-- Navigation -->
            <nav class="mdl-navigation">
                <a class="mdl-navigation__link" href="">Link</a>
                <a class="mdl-navigation__link" href="">Link</a>
                <a class="mdl-navigation__link" href="">Link</a>
                <a class="mdl-navigation__link" href="">Link</a>
            </nav>
        </div>
    </header>

    <div class="mdl-layout__drawer">
        <span class="mdl-layout-title">Title</span>
        <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Link</a>
            <a class="mdl-navigation__link" href="">Link</a>
            <a class="mdl-navigation__link" href="">Link</a>
            <a class="mdl-navigation__link" href="">Link</a>
        </nav>
    </div>

    <main class="mdl-layout__content">
        <div class="page-content">
            <!-- Your content goes here -->



        </div>
    </main>
</div>

app.ts

import { Component } from 'angular2/core';


@Component({
    selector: 'my-app',
    templateUrl: 'app/app.html',
    styleUrls: ['app/assets/css/material.min.css']

})
export class AppComponent { }

main.ts

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'

bootstrap(AppComponent);

推荐答案

由于您没有发布任何代码示例，所以我猜您在这种情况下(这是在将MDL与Angular2 ):将MDL包含在Angular 2 @Component模板中.

Since you aren't posting any code examples, I'm guessing you're in this scenario (this is the usual pitfall when using MDL with Angular2): you include MDL in your Angular 2 @Component template.

@Component({
    template: `mdl things here`,
    ....
}) export class YourComponent {}

如果是这种情况，则MDL组件处理程序(您包含的mdl的js部分负责处理动画和布局事情)对您包含在该模板中的mdl组件一无所知，因为Angular2有时会动态包含它在MDL组件处理程序查找要处理的MDL组件之后.

If that's the case, the MDL component handler (the js part of mdl you include which handles animations and layout things) doesn't know anything about the mdl components you include in that template, since it is included dynamically by Angular2 sometime after the MDL component handler looks for MDL components to handle.

长话短说，告诉MDL在组件初始化后重新检查DOM，以获取要处理的新组件:

Long story short, tell MDL to recheck the DOM for new components to handle after your component initializes:

declare var componentHandler: any;
export class MyComponent {
    ngAfterViewInit(){
        componentHandler.upgradeAllRegistered();
    }
}

这篇关于将Angular2与Material Design Lite一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！