首页 > 解决方案 > 单击按钮更改路由 url

问题描述

我正在尝试通过单击跨度来导航页面,到目前为止它对我来说这个代码工作正常。但只是想知道这是实现这一目标的唯一方法,还是有可能在一个函数内处理而不是有两个函数和两个使用输出事件发射器?请建议。

父组件:

public navigateAbout() {
    this.router.navigateUrl('/about');
}
public navigateContact() {
    this.router.navigateUrl('/contact');
}

子组件:

@Output() public navigateAbout = new EventEmitter<void>();
@Output() public navigateContact = new EventEmitter<void>();


public navigateAboutPage():void {
    this.navigateAbout.emit();
}

public navigateContactPage():void {
    this.navigateContact.emit();
}

子模板:

<ol>
<li>...... <span (click)="navigateAboutPage()">about</span>......</li>
<li>...... <span (click)="navigateContactPage()">contact</span>......</li>
</ol>

标签: angulartypescriptrxjs

解决方案


让我知道这是否有帮助。

<ol>
<li>...... <span (click)="navigate('about')">about</span>......</li>
<li>...... <span (click)="navigate('contact')">contact</span>......</li>
</ol>

模板

navigate(path){
    this.router.navigate([path])
  }

推荐阅读