javascript - 页面加载时隐藏菜单，onclick按钮显示菜单，第一次单击显示，第二次单击隐藏，就像 Angular 4.0中的切换一样

Question

我正在研究导航默认情况，当页面加载时导航应该隐藏。当我单击图标时，我想显示像切换一样的导航。当我从导航中移出鼠标时，我应该隐藏导航。 Angular 4.0。

index.html 
<button class='user_login' (click)='btnResult()'>
  <img src="./assets/menuicon.png" >
</button>

nav.component.html
<ul class="nav navbar-nav navbar-right menu" *ngIf="menu">
     <li ><a routerLink="one">one</a></li>
    <li><a routerLink="two">two</a></li>
    <li><a routerLink="three">three</a></li>
    <li><a routerLink="four">four</a></li>
    <li><a routerLink="five">five</a></li>
   <li><a routerLink="six">six</a></li>
 </ul>


nav.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.css']
})
export class NavComponent implements OnInit {
    menu = false;
    constructor() { 
    btnResult(){
    this.menu = true;
    }
  }
  ngOnInit() {
  }

}

Answer 1

component.html

    <button (click)="toggle()" id="bt">
    {{buttonName}}
</button>

<ng-container *ngIf="show">
    <div style="margin: 0 auto;text-align: left;">
        <div>
            <label>Name:</label>
            <div><input id="tbname" name="yourname" /></div>
        </div>
        <div>
            <label>Email Address:</label>
            <div><input name="email" id="email" /></div></div>
        <div>
            <label>Additional Information (optional):</label>
            <div><textarea rows="5" cols="46"></textarea></div>
        </div>
    </div>
</ng-container>

component.ts

    import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public show:boolean = false;
  public buttonName:any = 'Show';

  ngOnInit () {  }

  toggle() {
    this.show = !this.show;

    // CHANGE THE NAME OF THE BUTTON.
    if(this.show)  
      this.buttonName = "Hide";
    else
      this.buttonName = "Show";
  }
}