Материал Дизайн Lite проблема с наконечником в Angular 2

Question

Я изучил и прочитал все, что я могу найти по вопросу, который у меня есть, но я не могу найти ни одного из предлагаемых решений для работы. Я создаю приложение с использованием Angular 2 и MDL, которое берет заказы клиентов и отображает их на картах MDL. Иногда у заказов есть ошибки, которые я хочу отображать при наведении с использованием всплывающей подсказки MDL, но это не сработает для меня. Приложение настроено так, чтобы вызвать вызов API для получения входящих заказов, а затем отобразить их с использованием шаблона карты MDL с помощью * ngFor. Все это отлично работает.

Вот часть моего шаблона, который содержит 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' и добавление идентификатора заказа. Я знаю, что это работает, потому что я вижу это, когда проверяю элементы в инструментах dev.

Я читал, что я должен установить инкапсуляцию каждого компонента, чтобы никто, как это:

encapsulation: ViewEncapsulation.none 

Я сделал это. Я также прочитал, что я должен использовать компонентHandler для обновления DOM, который я пробовал двумя разными способами.

Сначала я попробовал это так:

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

Я также попытался это следующим образом:

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

Ничего из этого не работает.

Я обнаружил, что если я просто устанавливаю id равным строке вместо того, чтобы делать динамически с помощью Angular, то он работает, но затем я сталкиваюсь с проблемой создания уникального идентификатора для каждого заказа/карты.

Мне интересно, если это какая-то проблема синхронизации, и хотя даже при проверке элемента в инструментах dev я вижу, что идентификатор отображается так, как я ожидаю, 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(); 
    } 

}