使用 Angular2 和 Material Design Lite

Question

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

正如@talkdirty 解释的那样：

MDL 组件处理程序（您包含的处理动画和布局的 mdl 的 js 部分）对您包含在该模板中的 mdl 组件一无所知，因为它是在 MDL 组件处理程序之后的某个时间由 Angular2 动态包含的寻找要处理的 MDL 组件。

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

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 处理程序了。

Answer 2

由于您没有发布任何代码示例，我猜您是在这种情况下（这是在 Angular2 中使用 MDL 时的常见陷阱）：您在 Angular 2 中包含 MDL @Component模板。

@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();
    }
}