MDL和Angular2 2.0.0-rc.1

时间:2016-05-18 15:28:23

标签: angular material-design-lite

我正在努力让Material Design Lite(MDL)与Angular2的2.0.0-rc.1版本一起使用,特别是动态内容。

我有两个组件,一个是包含第二个组件的主要应用程序组件。我可以将HTML放入主要组件的模板中,使用MDL类,使用组件implement OnInit并从那里调用componentHandler.upgradeDom()。到目前为止添加的所有HTML现在都由MDL注册。

但是,当我有第二个组件使用service并将结果动态添加到其模板中时,第一个componentHandler.upgradeDom()未注册此内容。我不明白为什么在添加动态内容之后从第二个组件调用componentHandler.upgradeDom()也不起作用。我认为应该。它是否使用不同的componentHandler或其他东西?

另一个想法是让第二个组件以某种方式调用第一个组件的函数来告诉它使用它的componentHandler并从那里更新DOM,但我不知道该怎么做。< / p>

出于测试目的,我添加了一个本机Javascript文件,该文件调用相同的按钮并触发它 - 这是有效的。

我在StackOverflow上发现了几个可能会自动注册所有新HTML的指令,但是没有一个适用于我。有没有人知道如何为这个版本的Angular2做到这一点?

2 个答案:

答案 0 :(得分:0)

我正在使用此处的指令来调用componentHandler.upgradeAllRegistered();https://stackoverflow.com/a/35451821/1341825

为了让组件CSS正常工作,您还需要在组件上设置encapsulation:ViewEncapsulation.None(执行import {Component, ViewEncapsulation} from '@angular/core';

您可能还需要向组件中注入ElementRef,然后在其上显式调用componentHandler.upgradeElement。 (这对我不起作用,但我看到它在一些例子中起作用。)结帐:

答案 1 :(得分:0)

不幸的是,其他方面的回答对我来说也不起作用。

我的错误对我的项目非常具体。我正在添加动态内容并告知componentHandler.upgradeDom();但由于CSS将其设置为opacity: 0; max-height: 0,因此当时不可见的内容无效。这对我的项目是正确的,它会在单击时更改这些设置,以使用户可以看到它们。显然这就是为upgradeDom()函数忽略它的原因。

我在我的代码中的其他地方添加了相同的功能 - 基本上当我加载内容时,我将布尔值设置为true表示它已更改。当用户看到这样一个隐藏部分并且布尔值为true时,则调用该函数并将布尔值设置为false,这样每次都不会发生。

也许其他人在同一个地方。它当然不是最好的解决方案,不得不检查这些东西和诸如此类的东西,但是嘿,它有效。

修改 实际上我不是100%肯定是因为有问题的内容是隐藏,也许我只是过早地调用函数 。可能也想检查一下。