Material Design Lite選項卡在Angular2中不起作用

試圖在我的項目中使用MDL Tabs。但無法獲得所需的標籤樣式。Material Design Lite選項卡在Angular2中不起作用

組件代碼：

<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元素（例如， preloader），他們工作得很好。但標籤特別不起作用。

我也複製粘貼一些工作MDL標籤的例子到我的component.html，他們沒有工作。

沒有找到任何合適的解決方案給我。請解釋應該做些什麼來使其工作。

來源

2016-11-30 Alexandr Belov

必須將以下變量和函數添加到啓動應用程序的main.ts（或類似文件）文件中。取自that issue

declare var componentHandler: any; 

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

}, 100);

來源

2016-12-01 19:51:31

Material Design Lite選項卡在Angular2中不起作用

回答

相關問題