我创建了一个侧边栏菜单,但是在点击菜单项后我无法隐藏菜单.我按照
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);
}
});
}