在Angular4项目中，用户遇到一个侧边栏菜单无法在点击后隐藏的问题。他们参考了一个关于创建滑动侧导航的教程，尝试通过toggleMenu()方法来控制菜单的显示状态，但遇到了页面重新加载导致功能不正常的情况。解决方案是在app.component.ts中监听路由事件，根据路由变化来调整菜单状态。问题解决后，菜单现在能够正确地根据点击事件隐藏和显示，而不会引起页面的重新加载。
我创建了一个侧边栏菜单,但是在点击菜单项后我无法隐藏菜单.我按照
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：
Homeapp.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)'
})),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调用(快速),但现在它就像是第一次加载新页面.所以我需要帮助,如何在http://parlaybuddy.razartech.com/no-auth完成它
navigation.component.ts
toggleMenu() {
this.toggleMenu();
}
HTML：
解：
正如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);
}
});
}
239
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
