物料化制表符不能正常工作

Question

在下面的代码中，我使用了物质化和角物化。

<div class="row">
<div class="col s12">
    <ul tabs>
        <li class="tab col s3"><a href="#company">company</a></li>
        <li class="tab col s3"><a href="#fleet">fleet</a></li>
        <li class="tab col s3"><a href="#user">user</a></li>
        <li class="tab col s3"><a href="#vehicle">vehicle</a></li>
        <li class="tab col s3"><a href="#poi">poi</a></li>
        <li class="tab col s3"><a href="#driver">driver</a></li>
        <li class="tab col s3"><a href="#sim">sim</a></li>
        <li class="tab col s3"><a href="#device">device</a></li>
    </ul>
</div>
<div id="company" class="col s12" ng-include="'pages/companies.html'"></div>
<div id="fleet" class="col s12" ng-include="'pages/fleet.html'"></div>
<div id="user" class="col s12" ng-include="'pages/user.html'"></div>
<div id="vehicle" class="col s12" ng-include="'pages/vehicle.html'"></div>
<div id="poi" class="col s12" ng-include="'pages/poi.html'"></div>
<div id="driver" class="col s12" ng-include="'pages/driver.html'"></div>
<div id="sim" class="col s12" ng-include="'pages/sim.html'"></div>
<div id="device" class="col s12" ng-include="'pages/device.html'"></div></div>


<script>
$(document).ready(function () {
    $('ul.tabs').tabs();
});</script>

问题是，当我随机选择任何选项卡时，我总是看到第一个选项卡。如果我依次选择，它们看起来很好，但是我发现没有选择的其他选项卡继续出现在页面底部。如果你们中的任何一个人能解决这一不便，我将不胜感激。

​

​

Answer 1

如果有人正在使用角2，下面是一个示例：

1. 在组件的模板部分(html文件)中：

1. 在组件的ts文件中。

.导入*当M从‘物化-css’导出类AlcanceComponent实现OnInit，AfterContentInit { scopeTab: number；构造函数( this.scopeTab = 1；} ngOnInit()：void {} ngAfterContentInit()：void { var elems = document.querySelectorAll('.tabs')；var instance = M.Tabs.init(elems)；}setScopeTab(值: number)：void { this.scopeTab = value }.