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

}