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界面代替＆＃39; AfterViewInit＆＃39;

完整解决方案：
写一个＆＃39; mdl＆＃39;您将在app app组件的根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

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

@Component

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

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

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

使用Angular2和Material Design Lite

这是我的app.html文件

app.ts

main.ts

2 个答案: