Question

嗨我对mdl有点新鲜，我遇到的问题是如何在我正在构建的角度2 Web应用程序中呈现导航栏 - 它呈现为灰色背景并悬停 - {{3 }} 如果我把它从导航中取出它会渲染好但我不确定如何在没有它的情况下添加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

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

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

1 个答案: