Material Design Liteのツールチップの問題2角型

Question

私が抱えている問題のすべてを調べて、読んだことがありますが、提案されたソリューションのいずれも動作しないようです。私はAngular 2とMDLを使ってアプリケーションを構築しています。これは顧客の注文を受け取り、MDLカードに表示します。注文にエラーがあり、MDLのツールチップを利用してホバー上に表示したいのですが、私にとってはうまくいかないでしょう。受注をフェッチし、* ngForを使用してMDLカードテンプレートを使用して表示するAPI呼び出しを行うようにアプリケーションが設定されています。そのすべてが素晴らしい作品です。ここで

は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 

私はそれをやりました。私はまた、私は2つの異なる方法を試したDOMをアップグレードするためにcomponentHandlerを使うべきであることを読んだ。

まず、私はこのようにそれを試してみました：

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

また、私はこのようにそれを試してみました：これの

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

どれも働いていません。

私は単に、idを文字列に等しく設定するのではなく、動的にそれを動作させる代わりに、すべての注文/カードに対して一意のIDを生成する方法の問題に遭遇することを発見しました。

私はこれが何らかのタイミングの問題であるのか、devツールの要素を調べて、私が期待している方法でIDが表示されるのを見ても、MDLはそのようには見えません。私はsetTimeoutを使用してngAfterViewInit（）を2番目または2番目の呼び出しから遅延させようとしましたが、役に立たなかった。

ご協力いただければ幸いです。

Answer 1

私はAngular2でMDLを動作させました。 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(); 
    } 

}