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。我知道这很有效，因为当我检查浏览器开发工具中的元素时，我可以看到它。

我读到我应该将每个组件的封装设置为无：

    encapsulation: ViewEncapsulation.none

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

首先我尝试了这样：

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

我也尝试过这样：

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

这些都没有奏效。

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

我想知道这是否是某种时序问题，即使在检查dev工具中的元素时，我看到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();
    }

}

Angular 2

1 个答案: