Question

我想在我的Angular 2应用中加入嵌套菜单。我已经在使用＆＃34; md-menu＆＃34;，但现在我想把它作为嵌套菜单。到目前为止，在添加相关代码后，当菜单显示时，我必须单击每个主菜单项以打开子菜单。我不确定为什么会出现这种情况，在Angular Material演示中（根据我的判断使用相同的代码），它按预期工作 - 这意味着，当您滚动父元素时，子-menu自动出现，显示在根菜单的右侧（https://material.angular.io/components/menu/overview#nested-menu）。

我在Angular Material演示代码的代码中唯一改变的是我使用了＆＃34; md＆＃34;代替＆＃34; mat＆＃34;对于所有元素，因为Angular 2 / Material I使用的版本是必需的。如果我尝试使用＆＃34; mat＆＃34;。

，我会收到错误

这是我的观看代码：

   <md-toolbar>
      <button md-icon-button [mdMenuTriggerFor]="animals">
        <md-icon>more_vert</md-icon>
      </button>
    </md-toolbar>

    <md-menu #animals="mdMenu">
      <button md-menu-item [mdMenuTriggerFor]="vertebrates">Vertebrates</button>
      <button md-menu-item [mdMenuTriggerFor]="invertebrates">Invertebrates</button>
    </md-menu>

    <md-menu #vertebrates="mdMenu">
      <button md-menu-item [mdMenuTriggerFor]="fish">Fishes</button>
      <button md-menu-item [mdMenuTriggerFor]="amphibians">Amphibians</button>
      <button md-menu-item [mdMenuTriggerFor]="reptiles">Reptiles</button>
      <button md-menu-item>Birds</button>
      <button md-menu-item>Mammals</button>
    </md-menu>

    <md-menu #invertebrates="mdMenu">
      <button md-menu-item>Insects</button>
      <button md-menu-item>Molluscs</button>
      <button md-menu-item>Crustaceans</button>
      <button md-menu-item>Corals</button>
      <button md-menu-item>Arachnids</button>
      <button md-menu-item>Velvet worms</button>
      <button md-menu-item>Horseshoe crabs</button>
    </md-menu>

    <md-menu #fish="mdMenu">
      <button md-menu-item>Baikal oilfish</button>
      <button md-menu-item>Bala shark</button>
      <button md-menu-item>Ballan wrasse</button>
      <button md-menu-item>Bamboo shark</button>
      <button md-menu-item>Banded killifish</button>
    </md-menu>

    <md-menu #amphibians="mdMenu">
      <button md-menu-item>Sonoran desert toad</button>
      <button md-menu-item>Western toad</button>
      <button md-menu-item>Arroyo toad</button>
      <button md-menu-item>Yosemite toad</button>
    </md-menu>

    <md-menu #reptiles="mdMenu">
      <button md-menu-item>Banded Day Gecko</button>
      <button md-menu-item>Banded Gila Monster</button>
      <button md-menu-item>Black Tree Monitor</button>
      <button md-menu-item>Blue Spiny Lizard</button>
    </md-menu>
  <span class="fill-remaining-space"></span>

知道为什么这不能按预期工作吗？同样，我必须滚动一个菜单项，然后单击它以打开子菜单，而根据规范和示例演示，子菜单应在滚动元素时自动打开。还有一点需要注意，当滚动时，我也看不到父元素上出现的箭头;而它们确实出现在Angular演示中（上面的链接）。

嵌套菜单在Angular 2 App中无法正常工作

0 个答案: