将 Angular2 与 Material Design Lite 一起使用

Question

我正在学习 Angular2，但我在将 Angular2 与 MDL 结合使用时遇到问题。为什么 MDL 导航栏不适用于 Angular2？当我使用带 header 和抽屉的导航栏时，抽屉不工作，所以我无法点击它，我看不到抽屉的图标。还有另一个问题：文本字段也无法正常工作。我想使用 mdl-textfield--expandable (Search) 但是当我点击这个搜索字段时它没有展开。但是，如果没有 Angular2，它工作正常。

更新

这是我的app.html文件

<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);

Answer 1

由于您没有发布任何代码示例，我猜您正处于这种情况（这是将 MDL 与 Angular2[=20= 一起使用时的常见陷阱]): 您在 Angular 2 @Component 模板中包含了 MDL。

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

如果是这样，MDL 组件处理程序（您包含的 mdl 的 js 部分，用于处理动画和布局内容）对您包含在该模板中的 mdl 组件一无所知，因为它是由Angular2 在 MDL 组件处理程序查找要处理的 MDL 组件后的某个时间。

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

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

Answer 2

如@talkdirty 所述：

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.

他的解决方案适用于单个组件：

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

但是使用Angular2路由时，需要在每个路由组件上都添加这段代码，不是很智能和方便

作为解决方案，您可以使用 AfterViewChecked 接口代替 'AfterViewInit'

完整解决方案：
编写一个 'mdl' 指令，您将在应用程序组件的根 HTML 标记上使用它。

import {Directive, AfterViewChecked} from '@angular/core';
declare var componentHandler: any;

@Directive({
    selector: '[mdl]'
})
export class MDLUpgradeElementDirective implements AfterViewChecked {
    ngAfterViewChecked() {
        componentHandler.upgradeAllRegistered();
    }
}

然后声明你的根组件如下：

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import { MDLUpgradeElementDirective } from './mdl-upgrade-element.directive';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  template: '
  <div mdl class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
    <header class="mdl-layout__header">
      <div class="mdl-layout__header-row">
        <!-- Title -->
        <span class="mdl-layout-title">{{title}}</span>
      </div>
    </header>
    <main class="mdl-layout__content">
      <!-- Router Outlet -->
      <router-outlet></router-outlet>
    </main>
  </div>
  '
  directives: [
    ROUTER_DIRECTIVES,
    MDLUpgradeElementDirective
  ]
})
export class AppComponent {
  title = 'MDL Application';
}

那么您就不必再担心每个组件和路由上的 mdl js 处理程序了。

将 Angular2 与 Material Design Lite 一起使用

Using Angular2 With Material Design Lite

material-design

material-design-lite

angular

这是我的app.html文件

app.ts

main.ts