在angular 4项目中使用materialize css,我在导航栏中使用了以下代码进行下拉列表。在index.html中添加了js代码,如下所示,
$(document).ready(function() {
$(".dropdown-button").dropdown();
$('.dropdown-button2').dropdown({
inDuration: 300,
outDuration: 225,
constrain_width: false, // Does not change width of dropdown to that of the activator
hover: true, // Activate on hover
gutter: ($('.dropdown-content').width()*3)/2.5 + 5, // Spacing from edge
belowOrigin: false, // Displays dropdown below the button
alignment: 'left' // Displays dropdown with edge aligned to the left of button
});
});
模板代码 - monitoring.ts
<nav class="cyan lighten-1">
<div class="nav-wrapper">
<a href="#" class="brand-logo" style="margin-left: 12px;font-size: 27px;"> Enterprise Data Management</a>
<ul id="nav-mobile" class="right hide-on-med-and-down" style="font-size: 13px !important;">
<li ><a class="dropdown-button drop-size" data-activates="botMenu" data-belowOrigin="true">Bots<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="dropdown-button drop-size" data-activates="monitoringMenu" data-belowOrigin="true">Monitoring<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="dropdown-button" data-activates="userMenu" data-belowOrigin="true"><i class="material-icons left">perm_identity</i>User<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
<!-- Dropdown Structure -->
<ul id="userMenu" class="dropdown-content">
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
</ul>
<ul id="botMenu" class="dropdown-content">
<li><a (click)="showDialog = !showDialog" style="margin-top: -3px;"> Suspicious Bot</a></li>
</ul>
<ul id="monitoringMenu" class="dropdown-content">
<li><a class='dropdown-button2 d' href='#' data-activates='vehicleMenu' data-hover="hover" data-alignment="left">Vehicle</a></li>
<li><a class='dropdown-button2 d' href='#' data-activates='deviceMenu' data-hover="hover" data-alignment="left">Device</a></li>
</ul>
<ul id='vehicleMenu' class='dropdown-content'>
<li><a routerLink="/bsm" routerLinkActive="active"> BSM</a></li>
<li><a routerLink="/bluetoad" routerLinkActive="active"> BlueTOAD</a></li>
<li ><a routerLink="/sensors" routerLinkActive="active">SBV</a></li>
<!--<li>SBV</li>-->
</ul>
<ul id='deviceMenu' class='dropdown-content'>
<li ><a routerLink="/sensors" routerLinkActive="active">Environmental Sensors</a></li>
</ul>
当我加载应用程序9中的10次下拉列表没有加载时,我搜索了相关的文档,但仍然无法修复它。不仅这一个,多重选择也不能一致地工作。这是一个实现问题吗?或使用物化的角度有任何问题???