Nav 标记在 Angular 2 和 mdl 中无法正确呈现

Question

嗨，我对 mdl 有点陌生，我对如何在我正在构建的 Angular 2 Web 应用程序中呈现导航栏有疑问 - 它呈现为灰色背景并悬停 - 如果我将它从导航中取出，它会呈现正常，但我不确定如何在没有它的情况下添加 mdl 响应性..

下面是我使用的html模板

    <div mdl class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header hpe-slate mdl-layout__header--waterfall">
    <div class="mdl-layout-icon"></div>
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">angular2-quickstart</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation. We hide it in small screens. -->
      <nav class="mdl-navigation mdl-layout--large-screen-only">
        <a class="mdl-navigation__link" routerLink="/Home" routerLinkActive="active">Home</a>
        <a class="mdl-navigation__link" routerLink="/Items" routerLinkActive="active">Items</a>
        <a class="mdl-navigation__link" routerLink="/Widgets">Widgets</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer mdl-layout--small-screen-only">
    <span class="mdl-layout-title">Menu</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" routerLink="/Home" routerLinkActive="active">Home</a>
      <a class="mdl-navigation__link" routerLink="/Items" routerLinkActive="active">Items</a>
      <a class="mdl-navigation__link" routerLink="/Widgets">Widgets</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div class="page-content">
      <router-outlet></router-outlet>
      <!-- Your content goes here -->
    </div>
  </main>
</div>

任何帮助将不胜感激

Answer 1

好的，抱歉发现问题是为导航 a 设置了背景颜色的 rouge css - 删除了已修复的问题。