Angular2路由器与材料设计精简版互动 [英] Angular2 Router interacting with Material Design Lite

问题描述

我遇到的Angular2路由器和材料设计精简版（MDL）的动画之间的相互作用。如果我创建一个＆LT;输入＆GT; 在由＆LT呈现为构成要素;路由器出口＆GT; 组件在Angular2，MDL不能正确处理我的相互作用与它（不显示焦点动画，没有明确占位符文本等）。如果，另一方面，＆LT;输入＆GT; 出现外＆LT;路由器出口＆GT; ，有没有问题的。

I've come across an interaction between the Angular2 router and the Material Design Lite (MDL) animations. If I create an <input> element in a component that is rendered by the <router-outlet> component in Angular2, MDL doesn't properly handle my interactions with it (doesn't show focus animation, doesn't clear placeholder text, etc). If, on the other hand, the <input> appears outside the <router-outlet>, there is no problem.

现在看来似乎有事情做与＆LT内容的动态性;路由器出口＆GT; 。我想这会解决这个问题。我补充说，延长 ngAfterViewInit 和 ngAfterViewChecked 处理程序，以我的应用程序（甚至我的自定义指令> RouterOutlet ）。没有运气。我可以看到的ComponentHandler 变量，并调用 updateDom 方法......没问题。但它没有任何效果。

It seems like it has something to do with the dynamic nature of the contents of <router-outlet>. I thought this would solve the issue. I added an ngAfterViewInit and ngAfterViewChecked handler to my application (and even to my custom directive that extends RouterOutlet). No luck. I can see the componentHandler variable and call the updateDom method...no problem. But it has no effect.

有一定要想办法让MDL看到这些动态创建的元素，但我与 upgradeDom 尝试没有工作。也许 upgradeDom 不是问题......但是又是什么。

There must be some way to get MDL to "see" these dynamically created elements, but my attempts with upgradeDom haven't been working. Maybe upgradeDom isn't the problem...but then what is.

有什么建议？

推荐答案

所以，经过进一步挖掘，我想我已经找到的解决方案。与 plunkr 我能够证明正确的手动呼叫<播放code>的ComponentHandler＆LT;＆东西GT; 可以解决类似的问题，我已经设法在plunkr以图谋

So after further digging, I thought I had found a solution. Playing with the plunkr I was able to show that the right manual call to componentHandler.<something> could address a similar issue I had managed to contrive in that plunkr.

然而，这种方法也并没有解决我的问题（创建触发该指令被连接到生命周期事件这些调用自定义指令）。在路由器出口的动态自然仍干扰。据我所知道的，调用的ComponentHandler 仍premature和DOM已经真正被路由器 - 更新前正在做出口。

However, the approach there (of creating a custom directive that triggered those calls on lifecycle events that the directive was attached to) didn't solve my issue. The "dynamic" nature of the router-outlet was still interfering. As far as I can tell, the calls to componentHandler were still premature and being done before the DOM had truly been updated by the router-outlet.

我最终不得不做的是一些code添加到激活 RouterOutlet 的方法。我已经创建自定义的 RouterOutlet 类，所以这是很简单的贴code在激活方法。

What I eventually had to do was to add some code to the activate method of RouterOutlet. I was already creating a custom RouterOutlet class, so it was simple enough to stick the code in the activate method.

不过，我发现，是为必需您等待，直到无极相关联的激活方法解决。所以我做了这样的事情：

However, I found that is is essential that you wait until the Promise associated with the activate method is resolved. So I did something like this:

declare var componentHandler: any;

...
export class MyRouterOutlet extends RouterOutlet {
  ...
  activate(instruction: ComponentInstruction) {
    // My custom activate stuff (i.e., check that user is
    // authorized to view this content)

    // Important part, call base class...
    return super.activate(instruction)
       .then((x) => {
          componentHandler.upgradeDom();
          return x;
       });
  }
}

更新：

我还没有证实，但我怀疑，其他的解决方案我提到的原因没有工作是因为的另一个问题我碰到跑去。我怀疑是解决这一问题的妥善将允许我在这里引用其他的解决方案工作。

I have not confirmed it, but I suspect that the reason the other solutions I alluded to did not work was because of another issue I ran across. My suspicion is that addressing that issue properly would have allowed the other solutions I referenced here to work.

这篇关于Angular2路由器与材料设计精简版互动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！