0
私のプロジェクトで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要素（例：プリローダー）とうまく動作します。 しかしタブは特に機能しません。
また、MDLタブのいくつかのサンプルを私のcomponent.htmlにコピーして貼り付けましたが、うまく機能しませんでした。
私に適した解決策が見つかりませんでした。それを機能させるために何をすべきか説明してください。