ng2-下拉菜單在angular2中不起作用

Question

我已經堅持了好幾個小時，變得非常絕望。 因此，我有一個為學校項目制作的angular2應用程序，但是我想做的是，當我單擊+按鈕時，該下拉菜單出現，當我再次單擊它時，或者當我單擊鏈接時，它再次關閉。 現在，它一直保持打開狀態，當我單擊它時什么也沒做

我嘗試了許多不同的方法，從ng2-dropdown到顯示或隱藏菜單的javascript文件。 我沒有選擇，對此感到非常沮喪。

這是瀏覽器中的html元素，然后點擊+

這是我單擊+后在瀏覽器中的html元素

我已經為ng2-dropdown模塊完成了正確的導入，應該可以正常工作。 它可能很小但很愚蠢，但是我看不到。

這是我的app.component，它具有導航欄作為模板。 在點擊我路由到其他組件的HTML。

@Component({
selector: 'ls-app',
styleUrls: ['./app/css/fonts.css','./app/css/sass.css'],

template: `
<header id="header">
    <nav role='navigation' class="main-nav" id="main-nav">
        <ul id="main-nav-list">
            <div class="navgroup">
                <li><a [routerLink]="['/home']"class="navlogo" href="./leagues/home.component.html"><img class="logo" src="./app/img/logo.png" alt="logo"></a></li>
            </div>
            <div class="navgroup">
               <li>
<a [routerLink]="['/play']"class="navtitle" href="./leagues/play.component.html"><img class="imgMainNav" src="./app/img/play.svg" alt="play">Speel</a>
</li>
<li><a [routerLink]="['/stats']"class="navtitle"     href="./leagues/stats.component.html"><img class="imgMainNav"     src="./app/img/chart.png" alt="chart">Stats</a></li>
<li><a [routerLink]="['/leagues']"class="navtitle" href="./leagues/join-league.component.html"><img class="imgMainNav" src="./app/img/chart.png" alt="chart">Join League</a></li>

            </div>
            <div class="navgroup login">

                <div class="add-button" dropdown [dropdownToggle]="true">
                    <div  dropdown-open > +</div>

                    <ul class="dropdown" >

                        <a [routerLink]="['/account']"href="leagues/account.component.html"><li><i class="fa fa-check-square-o fa-2"></i>Mijn account</li></a>
                        <a [routerLink]="['/play']"href="leagues/play.component.html"><li><i class="fa fa-comments fa-2"></i>Plaats pronostiek</li></a>
                        <a [routerLink]="['/leagues']"href="leagues/join-league.component.html"><li><i class="fa fa-clipboard fa-2"></i>Nieuwe competitie</li></a>
                        <a href=""><li><i class="fa fa-user-plus fa-2"></i>Shop</li></a>
                        <a href=""><li><i class="fa fa-user-plus fa-2"></i>Log out</li></a>

                    </ul>
                </div>
                <li><a class="navtitle loginnav login-window" onclick="hierkomtdefunctievanjavascriptfile()" ><img class="imgMainNav" src="./app/img/fa-user.png" alt="login">Login/Register</a></li>
            </div>
        </ul>
    </nav>
</header>

這是我的CSS（實際上是sass，但在運行時會轉換），以防萬一。 因此，當我單擊按鈕時，類為.dropdown，再次單擊時，它應更改為.hidden

.dropdown {
position: relative;
top: 25px;
margin: 0 auto;
padding: 5px 0 0 0;
width: 200px;
height: auto;
background: $primary_color1_white;
border: 1px solid $primary_color2_black;
border-radius: 3px;
list-style: none;

&:before {
content: "";
border-width: 1px 0 0 1px;
border-style: solid;
border-color: #A1A4AA;
background: $primary_color1_white;
height: 14px;
width: 14px;
position: absolute;
top: -7px;
transform: translateX(-50%) rotate(45deg);
}

a {
text-decoration: none;
color: $primary_color2_black;
font-size: 1em;

li {
  text-align: left;
  padding:  10px 15px;
  margin: 0;

  i {
    margin-right: 10px;
  }
}
&:hover {
  color: #ffffff;
  li {
    background: linear-gradient(to top right, $primary_color1_white, $melon      30%);  } } } }
.hidden{visibility: hidden;}

Answer 1

在您的模板中修改以下內容：

<div class="add-button" dropdown>
  <div (click)="toggleDropdown()"> +</div>

  <ul class="dropdown" *ngIf="showDropdown">

    <a (click)="toggleDropdown()" [routerLink]="['/account']" href="leagues/account.component.html">
      <li><i class="fa fa-check-square-o fa-2"></i>Mijn account</li>
    </a>
    <a (click)="toggleDropdown()" [routerLink]="['/play']" href="leagues/play.component.html">
      <li><i class="fa fa-comments fa-2"></i>Plaats pronostiek</li>
    </a>
    <a (click)="toggleDropdown()" [routerLink]="['/leagues']" href="leagues/join-league.component.html">
      <li><i class="fa fa-clipboard fa-2"></i>Nieuwe competitie</li>
    </a>
    <a (click)="toggleDropdown()" href="">
      <li><i class="fa fa-user-plus fa-2"></i>Shop</li>
    </a>
    <a (click)="toggleDropdown()" href="">
      <li><i class="fa fa-user-plus fa-2"></i>Log out</li>
    </a>

  </ul>
</div>

然后在您的組件邏輯中：

showDropdown: boolean = false;

toggleDropdown():void { 
   this.showDropdown = !this.showDropdown;
}