Material Design Lite 选项卡在 Angular2 中不起作用答案

【问题标题】：Material Design Lite Tabs not working in Angular2Material Design Lite 选项卡在 Angular2 中不起作用
【发布时间】：2016-11-30 21:08:31
【问题描述】：

尝试在我的项目中使用MDL Tabs。但无法获得所需的标签样式。

组件代码：

<div class="releases-list-component">

<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect" >//***** mdl container

<div class="mdl-tabs__tab-bar">//***** mdl tabs
 <a href="#albums" class="mdl-tabs__tab is-active">Albums</a>
 <a href="#split" class="mdl-tabs__tab">Splits</a>
 <a href="#tributes" class="mdl-tabs__tab">Tributes</a>
</div>


<div class="mdl-tabs__panel is-active" id="albums">//***** mdl tab content
  <div class="release-list-item release_1"></div>
  <div class="release-list-item release_2"></div>
  <div class="release-list-item release_3"></div>
  <div class="release-list-item release_4"></div>
  <div class="release-list-item release_8"></div>
  <div class="release-list-item release_9"></div>
</div>

<div class="mdl-tabs__panel" id="splits">//***** mdl tab content
  <div class="release-list-item release_6"></div>
</div>

<div class="mdl-tabs__panel" id="tributes">//***** mdl tab content
  <div class="release-list-item release_5"></div>
  <div class="release-list-item release_7"></div>
</div>

  </div>
</div>

我的index.html

<!DOCTYPE html>
<html>
<head>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- MDL CSS library  -->
<link rel="stylesheet" href="/node_modules/material-design-lite/material.min.css">

<!-- MDL JavaScript library  -->
<script src="/node_modules/material-design-lite/material.min.js"></script>

<!-- Material Design Icons  -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<!-- Custom Style  -->
<link rel="stylesheet" href="app/css/styles.css">

<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>

<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>

<script src="systemjs.config.js"></script>

<script>
  System.import('app').catch(function(err){ console.error(err); });
</script>
</head>

我的style.css

   #albums {
     display: flex;
     justify-content: space-around;
     flex-wrap: wrap;
   }

   .release-list-item {
     width: 400px;
     height: 400px;
     margin: 15px;
   }

   .release_1 {
      background: url('../images/cover.jpg') center center no-repeat;
      background-size: 100%; 
    }

我也在使用其他 mdl 元素（例如预加载器），它们工作正常。但是标签特别不起作用。

我还将一些有效的 MDL 选项卡示例复制粘贴到了我的 component.html 中，但它们也不能正常工作。

没有找到适合我的解决方案。请解释一下应该怎样做才能让它发挥作用。

【问题讨论】：

标签： angular tabs material-design-lite

【解决方案1】：

必须将以下变量和函数添加到启动应用程序的 main.ts（或类似文件）中。取自that issue

declare var componentHandler: any;

setTimeout(function() {
  componentHandler.upgradeAllRegistered();

}, 100);

【讨论】：