サイドバーメニューを作成しましたが、メニュー項目をクリックした後、メニューを非表示にできません。 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';
}
更新:
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);
}
});
}
ルーターイベントでそれを処理し、this.menuState
から'out'
ルートが変更されるたび。
かなりまともなサンプルコード ここ
NgZoneで切り替えを行う必要があります。そのためには、最初に次のモジュールを追加する必要があります。
_import { NgZone } from '@angular/core';
_
コンストラクターでゾーン変数を作成します
_constructor(public zone: NgZone){}
_
そして、次のようにZone()
メソッドでトグルロジックを書きます
_toggleMenu() {
this.zone.run(()=>{
this.menuState = this.menuState === 'out' ? 'in' : 'out';
})
}
_
ナビゲーションコンポーネントはアプリコンポーネントの子コンポーネントではありません。 navigation.component.tsの完全なコードがあるといいでしょう。ナビゲーションコンポーネントのメニュー状態はどのように親に送信されますか?何が起こっているのかわからないので、サンプルコードをslackblitzに入れました
https://stackblitz.com/edit/animations-in-angular4-2qwdt7?file=app%2Fnavigation.component.ts
すべてのルーターイベントのナビゲーションは、必要なときにのみ実行されるソリューションよりも遅くなります。 (リンクまたは呼び出しによってルートを変更するたびに実行されます。)
解決策は ちょうどこのように で、クリックイベントをリッスンし、状態を変更できます。