Angular2 路由器与 Material Design Lite 交互答案

【问题标题】：Angular2 Router interacting with Material Design LiteAngular2 路由器与 Material Design Lite 交互
【发布时间】：2016-07-09 19:51:58
【问题描述】：

我遇到了 Angular2 路由器和 Material Design Lite (MDL) 动画之间的交互。如果我在由 Angular2 中的 <router-outlet> 组件呈现的组件中创建 <input> 元素，则 MDL 无法正确处理我与它的交互（不显示焦点动画，不清除占位符文本等） .另一方面，如果<input> 出现在<router-outlet> 之外，则没有问题。

这似乎与<router-outlet> 内容的动态特性有关。我认为this 会解决这个问题。我在我的应用程序中添加了ngAfterViewInit 和ngAfterViewChecked 处理程序（甚至添加到扩展RouterOutlet 的自定义指令）。没有运气。我可以看到componentHandler 变量并调用updateDom 方法...没问题。但是没有效果。

必须有某种方法让 MDL “看到”这些动态创建的元素，但我对 upgradeDom 的尝试没有奏效。也许upgradeDom 不是问题……但那又是什么问题。

有什么建议吗？

【问题讨论】：

标签： angular material-design-lite

【解决方案1】：

所以在进一步挖掘之后，我以为我找到了a solution。使用plunkr 我能够证明正确的手动调用componentHandler.<something> 可以解决我在那个plunkr 中设法设计的类似问题。

但是，那里的方法（创建自定义指令以触发对指令附加到的生命周期事件的调用）并没有解决我的问题。 router-outlet 的“动态”性质仍在干扰。据我所知，对componentHandler 的调用还为时过早，并且在router-outlet 真正更新DOM 之前就已完成。

我最终要做的是在RouterOutlet 的activate 方法中添加一些代码。我已经创建了一个自定义的RouterOutlet 类，因此将代码粘贴到activate 方法中非常简单。

但是，我发现必须等待与activate 方法关联的Promise 得到解决。所以我做了这样的事情：

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;
       });
  }
}

更新：

我还没有确认，但我怀疑我提到的其他解决方案不起作用的原因是因为another issue I ran across。我怀疑正确解决这个问题会让我在此处引用的其他解决方案起作用。

【讨论】：