有没有办法让MDL Scrollable Tabs与angular2-mdl模块一起使用？

Question

我正在尝试让MDL Scrollable标签在我的应用中运行，但结果是布局中断了： http://plnkr.co/edit/Xkm520OQvzULLWkpE0HE?p=preview

<mdl-layout mdl-layout-fixed-header>
     <mdl-layout-header>
      <mdl-layout-header-row>
        <mdl-layout-title>Title</mdl-layout-title>
        <mdl-layout-spacer></mdl-layout-spacer>
        <!-- Navigation. We hide it in small screens. -->
        <nav class="mdl-navigation">
          <a class="mdl-navigation__link">Link</a>
        </nav>
      </mdl-layout-header-row>
      <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
           <a href="#scroll-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
           <a href="#scroll-tab-2" class="mdl-layout__tab">Tab 2</a>
           <a href="#scroll-tab-3" class="mdl-layout__tab">Tab 3</a>
           <a href="#scroll-tab-4" class="mdl-layout__tab">Tab 4</a>
           <a href="#scroll-tab-5" class="mdl-layout__tab">Tab 5</a>
           <a href="#scroll-tab-6" class="mdl-layout__tab">Tab 6</a>
         </div>
    </mdl-layout-header>
    <mdl-layout-drawer>
      <mdl-layout-title>Title</mdl-layout-title>
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link">Link</a>
      </nav>
    </mdl-layout-drawer>
    <mdl-layout-content class="demo-content">


    </mdl-layout-content>
  </mdl-layout>

我无法在angular2-mdl文档中找到如何执行此操作。

预期结果应如下： https://codepen.io/micdalco/pen/MboeGo