web-dev-qa-db-ja.com

Angular-メニュー項目をクリックした後にサイドバーメニューを非表示にする

サイドバーメニューを作成しましたが、メニュー項目をクリックした後、メニューを非表示にできません。 https://blog.thecodecampus.de/angular-2-animate-creating-sliding-side-navigation/ の例に従いました

HTMLからすべてのハイパーリンクの（クリック）でtoggleMenuを呼び出す必要がありますか？はいの場合、app.component.tsにあるメソッドを別のコンポーネントから呼び出すにはどうすればよいですか？

助けてください...

私はAngular 4 with bootstrap 4。

ここに私のコードがあります：app.component.html：

<button (click)="toggleMenu()" class="hamburger">
  <span>toggle menu</span>
</button>

<!--  <app-menu [@slideInOut]="menuState"></app-menu>  -->
<navigation-component [@slideInOut]="menuState"> </navigation-component>

<div class="container-fluid">
  <alert></alert>
  <router-outlet></router-outlet>
</div>

navigation.component.mobile.html：

    <li><a routerLink="/home" routerLinkActive="active"> Home</a></li>
    <li>
        <a href="#submenu1" data-toggle="collapse">Alert</a>
        <ul id="submenu1" class="list-unstyled collapse">
            <li><a routerLink="/linesidemonitor" data-toggle="collapse" data-target=".navbar-collapse.show">IQS Alert</a></li>
        </ul>
    </li>
    <li routerLinkActive="active" [hidden]="!authenticated()">
        <a href="#submenu2" data-toggle="collapse">Configuration</a>
        <ul id="submenu2" class="list-unstyled collapse">
            <li><a routerLink="/contact" data-toggle="collapse" data-target=".navbar-collapse.show">Contacts</a></li>
            <li><a routerLink="/department" data-toggle="collapse" data-target=".navbar-collapse.show">Departments</a></li>
            <li><a routerLink="/notificationlevel">NotificationLevels</a></li>
            <li><a routerLink="/recipient">Recipients</a></li>
        </ul>
    </li>

app.component.ts：

@Component({
  selector: 'app-root',
  templateUrl: './'  + (window.innerWidth > 745 ? 
          'app.component.html' :
          'app.component.mobile.html'),
  styleUrls: ['./app.component.css'],
  animations: [
               trigger('slideInOut', [
                 state('in', style({
                   transform: 'translate3d(0, 0, 0)'
                 })),
                 state('out', style({
                   transform: 'translate3d(100%, 0, 0)'
                 })),
                 transition('in => out', animate('400ms ease-in-out')),
                 transition('out => in', animate('400ms ease-in-out'))
               ]),
             ]
})
  toggleMenu() {
      // 1-line if statement that toggles the value:
      this.menuState = this.menuState === 'out' ? 'in' : 'out';
  }

enter image description here

更新：

ToggleMenu（）を呼び出そうとしました。動作していますが、ページが再び読み込まれています。以前はAJAX call（quick）のようでしたが、今では新しいページが初めて読み込まれるようになっています。そのため、 http://parlaybuddy.razartech.com/no-auth

https://jmouriz.github.io/angular-material-multilevel-menu/demo/demo.html#!/demo/views/item-1-1

https://stackblitz.com/edit/dynamic-nested-sidenav-men

navigation.component.ts

toggleMenu() {
    this.toggleMenu();
}

HTML：

       <ul id="submenu2" class="list-unstyled collapse">
            <li><a class="submenu" routerLink="/contact"  (click)="toggleMenu()">Contacts</a></li>
            <li><a class="submenu" routerLink="/department" (click)="toggleMenu()">Departments</a></li>

ソリューション：

Santoshが実現したように、app.component.tsのコードの下に追加し、期待どおりに機能しました。サントッシュありがとう

  constructor(private http: Http,
          private router: Router,
          public zone: NgZone) {
          router.events.subscribe( (event: Event) => {
              if (event instanceof NavigationStart) {
                  this.menuState = 'out';
              }

              if (event instanceof NavigationEnd) {
                  // Hide loading indicator
              }

              if (event instanceof NavigationError) {
                  // Hide loading indicator
                  // Present error to user
                  console.log(event.error);
              }
          });
  }
angulartypescriptbootstrap-4
10
SK.

ルーターイベントでそれを処理し、this.menuStateから'out'ルートが変更されるたび。

かなりまともなサンプルコード ここ

7
Santhosh S

NgZoneで切り替えを行う必要があります。そのためには、最初に次のモジュールを追加する必要があります。

_import { NgZone } from '@angular/core';
_

コンストラクターでゾーン変数を作成します

_constructor(public zone: NgZone){}
_

そして、次のようにZone()メソッドでトグルロジックを書きます

_toggleMenu() {
    this.zone.run(()=>{
    this.menuState = this.menuState === 'out' ? 'in' : 'out';
   })
}
_
1
Chintan Kukadiya

ナビゲーションコンポーネントはアプリコンポーネントの子コンポーネントではありません。 navigation.component.tsの完全なコードがあるといいでしょう。ナビゲーションコンポーネントのメニュー状態はどのように親に送信されますか？何が起こっているのかわからないので、サンプルコードをslackblitzに入れました

https://stackblitz.com/edit/animations-in-angular4-2qwdt7?file=app%2Fnavigation.component.ts

0
Krishnanunni Jeevan

すべてのルーターイベントのナビゲーションは、必要なときにのみ実行されるソリューションよりも遅くなります。 （リンクまたは呼び出しによってルートを変更するたびに実行されます。）

解決策は ちょうどこのように で、クリックイベントをリッスンし、状態を変更できます。

0
androbin