angularjs动态侧边栏菜单_Angular – 单击菜单项后隐藏侧边栏菜单

我创建了一个侧边栏菜单,但是在点击菜单项后我无法隐藏菜单.我按照

https://blog.thecodecampus.de/angular-2-animate-creating-sliding-side-navigation/的例子

我是否需要从html上调用(点击)每个超链接的toggleMenu？如果是,如何从另一个组件调用app.component.ts中的方法？

需要帮助请…

我正在使用Angular 4和bootstrap 4.

这是我的代码：

app.component.html：

toggle menu

navigation.component.mobile.html：

Home

Alert

• IQS Alert

Configuration

• Contacts
• Departments
• NotificationLevels
• Recipients

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调用(快速),但现在它就像是第一次加载新页面.所以我需要帮助,如何在http://parlaybuddy.razartech.com/no-auth完成它

navigation.component.ts

toggleMenu() {

this.toggleMenu();

}

HTML：

• Contacts
• Departments

解：

正如Santosh所提到的,我在app.component.ts中添加了以下代码,它按预期工作.谢谢Santosh

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);

}

});

}