在Angular中,可以通过组件之间的传递数据来解决二级导航点击链接后消失的问题。在二级导航组件中,可以使用@Output装饰器和EventEmitter来广播用户的点击事件。在引用二级导航组件的父组件中,可以监听该事件,并改变二级导航的状态,使其保持打开状态。以下是示例代码:
二级导航组件:
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-secondary-nav',
templateUrl: './secondary-nav.component.html',
styleUrls: ['./secondary-nav.component.css']
})
export class SecondaryNavComponent {
@Output() linkClicked = new EventEmitter();
onLinkClick() {
this.linkClicked.emit();
}
}
父组件中引用二级导航组件的代码:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
`,
styleUrls: ['./parent.component.css']
})
export class ParentComponent {
isNavOpen = true;
onLinkClick() {
this.isNavOpen = true;
}
}
在父组件中,可以使用isNavOpen变量来记录二级导航的状态。在linkClicked事件被触发时,将isNavOpen设置为true,这样链接页面被加载后,二级导航就不会消失了。