Javascript 谷歌MDL-侧面抽屉菜单-作为单独组件制作时不工作&；在另一个组件中使用

我有一个Angular 2应用程序，有一个仪表板页面，其中有一个侧抽屉菜单，我将侧抽屉菜单作为一个单独的组件，并在仪表板模板中使用。我在下面为非工作和工作案例添加了代码和图像

父组件和子组件都具有：

window["componentHandler"].upgradeAllRegistered();

在各自的“ngOnInit”方法中

不工作情况：

<div class="mdl-layout__drawer">
    <slide-panel></slide-panel>
</div>

<span class="mdl-layout-title">Menu</span>
  <nav class="mdl-navigation">
    <a class="mdl-navigation__link" href="">Add New User</a>
    <a class="mdl-navigation__link" href="">Import User Account</a>
    <a class="mdl-navigation__link" href="">My Account</a>
    <a class="mdl-navigation__link" href="">Update Remote Firmware</a>
    <a class="mdl-navigation__link" href="">Logout</a>
  </nav>

dashboard.component.html

<slide-panel></slide-panel>

<div class="mdl-layout__drawer">
  <span class="mdl-layout-title">Menu</span>
  <nav class="mdl-navigation">
    <a class="mdl-navigation__link" href="">Add New User</a>
    <a class="mdl-navigation__link" href="">Import User Account</a>
    <a class="mdl-navigation__link" href="">My Account</a>
    <a class="mdl-navigation__link" href="">Update Remote Firmware</a>
    <a class="mdl-navigation__link" href="">Logout</a>
  </nav>
</div>

侧面板.component.html

<slide-panel></slide-panel>

<div class="mdl-layout__drawer">
  <span class="mdl-layout-title">Menu</span>
  <nav class="mdl-navigation">
    <a class="mdl-navigation__link" href="">Add New User</a>
    <a class="mdl-navigation__link" href="">Import User Account</a>
    <a class="mdl-navigation__link" href="">My Account</a>
    <a class="mdl-navigation__link" href="">Update Remote Firmware</a>
    <a class="mdl-navigation__link" href="">Logout</a>
  </nav>
</div>

菜单

输出：

工作案例：

dashboard.component.html

<div class="mdl-layout__drawer">
    <slide-panel></slide-panel>
</div>

<span class="mdl-layout-title">Menu</span>
  <nav class="mdl-navigation">
    <a class="mdl-navigation__link" href="">Add New User</a>
    <a class="mdl-navigation__link" href="">Import User Account</a>
    <a class="mdl-navigation__link" href="">My Account</a>
    <a class="mdl-navigation__link" href="">Update Remote Firmware</a>
    <a class="mdl-navigation__link" href="">Logout</a>
  </nav>

侧面板.component.html

<div class="mdl-layout__drawer">
    <slide-panel></slide-panel>
</div>

<span class="mdl-layout-title">Menu</span>
  <nav class="mdl-navigation">
    <a class="mdl-navigation__link" href="">Add New User</a>
    <a class="mdl-navigation__link" href="">Import User Account</a>
    <a class="mdl-navigation__link" href="">My Account</a>
    <a class="mdl-navigation__link" href="">Update Remote Firmware</a>
    <a class="mdl-navigation__link" href="">Logout</a>
  </nav>

菜单

输出：

我已经在两幅图片中标记了html元素的更改（蓝色）。我知道发生的事是不对的

这里出了什么问题

创建可重用的MDL-styled-angular2组件以用于其他组件的正确方法是什么

提前谢谢