方法1：创建服务

Question

我正在将Angular应用程序从ui-router升级到@angular/router（v6）。

有一个函数想找到以前的路线。这是使用Transition

中的ui-router/core的实现

    const newFromName = this.transition.from().name;
    this.transition.params('from')

我删除了大部分功能，因为它不相关。

我的问题是：

是否有@angular/router等同于上述两行？

我们使用
"@uirouter/angular-hybrid": "3.1.7"
"@angular/router": "6.1.1",

注意：这与动画无关。我不想为过渡设置动画，我只想知道以前的路线是什么。

添加了说明：例如，如果我在导航至该组件之前处于不同的路线，例如hello/world，然后使用my/new/route中的此代码导航到路线。我需要知道值/hello/world

Answer 1

您可以使用它，并在// Exit Code中访问您来自的路线

import { Router, NavigationStart, NavigationEnd } from '@angular/router';

...

constructor(router:Router) {
  router.events.subscribe(e => {
    if(e instanceof NavigationStart) {
      // Init Code
    }

    if(e instanceof NavigationEnd) {
      // Exit Code
    }
  }
});

Answer 2

方法1：创建服务

@Injectable()   
export class RouterState {
  private routeHistory = [];

  constructor(private router: Router) {
    // nothing to do
  }

  public startHistory() {
    this.router.events
      .pipe(filter(e => e instanceof NavigationEnd))
      .subscribe(newUrl => this.routeHistory = [...this.routeHistory, newUrl]);
  }

  public getRouteHistory() {
    return this.routeHistory;
  }
}

在您的应用程序组件中：

constructor(private routerState: RouterState) {
  this.routerState.startHistory();
}

在您需要获取历史记录的组件中：

constructor(private routerState: RouterState) {}

yourFunction() {
  const allRoutes = this.routerState.getRouteHistory();
  const lastUrl = !!allRoutes.length 
    ?  allRoutes.slice(-2)
    :  '';
}

ui-router中是否有一个@ angular / router等效于transition.from（）？

2 个答案:

方法1：创建服务