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 요소 (예 : 프리 로더) 그리고 그들은 잘 작동합니다. 하지만 탭이 특히 작동하지 않습니다.

MDL Tabs의 일부 예제를 내 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에서 작동하지 않습니다.

답변

관련 문제