如何导航到父路由（或清除路由器出口）？ Angular 5

Question

假设我的观点是这样的：

localhost/main

  <h1>Angular Router</h1>
  <nav>
    <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
    <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
  </nav>
  <router-outlet></router-outlet>

如果我点击英雄，那么 URI 将是例如。 localhost/main/英雄

我想在打字稿中添加功能以导航回 localhost/main.

但是我不想用这样的功能

private navigateToDefaultView() {
    this.router.navigate(["/main"]);
}

因为 /main 部分可能会更改。我更喜欢那样的东西

private navigateToDefaultView() {
    this.router.navigate(ToParentRoute);
// or
    clearRouterOutletSomeHow
}

这可能吗？或者我被迫以字符串形式提供 URI。

编辑：我想到了类似的东西：

ngOnInit() {
        this.isMainActivated= this.router.url.indexOf("/main") > -1;
        this.isHomeActivated= this.router.url.indexOf("/home") > -1;
}

private navigateToDefaultView() {
        let url;
        if (this.isMainActivated) {
            url = this.router.url.substring(0, this.router.url.indexOf("main") + "main".length);
        } else if (this.isHomeActivated) {
            url = this.router.url.substring(0, this.router.url.indexOf("home") + "home".length);
        }

        this.router.navigate([url]);
    }

但我更喜欢更优雅的解决方案。

Answer 1

解决方案比我想象的要容易。

<button [routerLink]="['../']">
   Back
</button>

它 returns 给父级 url。

如何导航到父路由（或清除路由器出口）？ Angular 5

How to navigate to parent route (or clear router-outlet)? Angular 5

angular-routing

angular

angular5