Angular 2 中的 Material Design Lite 工具提示问题

Question

我已经研究并阅读了我能找到的关于我遇到的问题的所有内容，但我似乎无法让任何建议的解决方案发挥作用。我正在使用 Angular 2 和 MDL 构建一个应用程序，它接受客户订单并将其显示在 MDL 卡上。有时订单有错误，我想使用 MDL 工具提示在悬停时显示，但它对我不起作用。应用程序设置为进行 API 调用以获取传入订单，然后使用 *ngFor 使用 MDL 卡模板显示它们。所有这些都很好。

这是我的模板中包含 MDL 工具提示的部分：

    <div id="id{{order.order_id}}" class="error-icon-div">
      <div class="icon material-icons error-icon" *ngIf="order.error">
        error
      </div>
    </div>
    <div class="mdl-tooltip mdl-tooltip--large" attr.data-mdl-   
    for="id{{order.order_id}}">
       {{order.error}}
    </div>

由于您不能多次使用同一个 ID，因此我通过获取字符串“id”并添加订单 ID 为每个卡/订单生成一个唯一 ID。我知道这是可行的，因为当我检查浏览器开发工具中的元素时可以看到它。

我读到我应该像这样将每个组件的封装设置为 none：

    encapsulation: ViewEncapsulation.none

我已经做到了。我还读到我应该使用 componentHandler 来升级 DOM，我尝试了两种不同的方法。

首先我是这样尝试的：

    ngAfterViewInit() {
       componentHandler.upgradeDom();
    };

我也试过这样：

    ngAfterViewInit() {
      componentHandler.upgradeAllRegistered();
    };

这些都没有奏效。

我发现，如果我只是将 id 设置为一个字符串，而不是使用 Angular 动态地执行它，它就可以工作，但是我遇到了如何为每个订单/卡生成唯一 ID 的问题。

我想知道这是否是某种时间问题，即使在开发工具中检查元素时，我看到 id 以我期望的方式呈现，MDL 并没有看到它。我尝试使用 setTimeout 将 ngAfterViewInit() 延迟一两秒，但无济于事。

任何帮助将不胜感激。

Answer 1

我已经让 MDL 与 Angular2 一起工作。我必须在 ngAfterViewChecked 事件中设置它。

在 App.Component.ts 中：

import $ from 'jquery';
import { Component, AfterViewChecked, ViewEncapsulation, Inject } from '@angular/core';
import { AccountService } from '../services/account.service';
import { User } from '../models/user.model';
import 'material';

@Component({
    selector: 'my-app',
    templateUrl: 'app/components/app.component.html',
    styleUrls: ['...', 'dist/vendors.min.css'],
    encapsulation: ViewEncapsulation.None //for ui framework to work normally
})
export class AppComponent implements AfterViewChecked {

    constructor(
        private accountService: AccountService,
        @Inject('User') public user : User ) {
    }

    ngAfterViewChecked() { //need to start ui frameworks quite late.
       componentHandler.upgradeAllRegistered();
    }

}