我创建了一个侧边栏菜单,但是在点击菜单项后我无法隐藏菜单.我按照
https://blog.thecodecampus.de/angular-2-animate-creating-sliding-side-navigation/的例子
我是否需要从html上调用(点击)每个超链接的toggleMenu？如果是,如何从另一个组件调用ponent.ts中的方法？
需要帮助请…
我正在使用Angular 4和bootstrap 4.
这是我的代码：
ponent.html：
toggle menu
ponent.mobile.html：
Home
Alert
IQS Alert
Configuration
ContactsDepartmentsNotificationLevelsRecipients
ponent.ts：
@Component({
selector: 'app-root',templateUrl: './' + (window.innerWidth > 745 ?
'ponent.html' :
'ponent.mobile.html'),styleUrls: ['./ponent.css'],animations: [
trigger('slideInOut',[
state('in',style({
transform: 'translate3d(0,0)'
})),state('out',style({
transform: 'translate3d(100%,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调用(快速),但现在它就像是第一次加载新页面.所以我需要帮助,如何在/no-auth完成它
ponent.ts
toggleMenu() {
this.toggleMenu();
}
HTML：
ContactsDepartments
解：
正如Santosh所提到的,我在ponent.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);
}
});
}
