Question

我刚刚将我的angular 7应用程序升级到了Angular9。现在，当我尝试单击routerroute =“'/ login'”时，它只是将其附加到URL。在Angular 7中，它将清除网址并将我带到该路径。

我的网址是： http://localhost:0101/app/main 我点击

html:  <li (click)="goTo('login')"><a>Login</a></li>

  // this is the function that gets called from the html

  goTo(route) {
    this.router.navigate([route]);
  }

但是会产生： htpp：// localhost：0101 / app / main / login 这是错误的，我希望它是 htpp：// localhost：0101 / login

注意：app / main是延迟加载的组件。登录名在app-module.routing.ts文件中

好像Angular 9改变了它处理这些路线变化的方式。而且文档似乎没有详细解释。

希望听到您的反馈！

Answer 1

您可以通过在生成新路线时从根开始创建绝对路径引用：

<li (click)="goTo('login')"><a>Login</a></li>

goTo(route: string) {
    this.router.navigateByUrl('/' + route);
}

在这种情况下，我更喜欢使用navigateByUrl，因为它需要一个字符串，这样，如果导航到的路由包含'/'，则您无需执行任何其他操作。否则，您应该拆分传递的路由以创建要传递给navigate的新数组。

另一个选择：

<li (click)="goTo('/login')"><a>Login</a></li>

goTo(route: string) {
    this.router.navigateByUrl(route);
}

在两种情况下，都加载/login而不是当前激活路径的相对路径。

在RouterLink的文档中可以看到：

第一个段名称可以以/、./或../开头：

如果第一段以/开头，则路由器将从应用根目录查找路由。

如果第一段以./开头，或者不是以斜线开头，则路由器将查找当前已激活路由的子段。

如果第一段以../开头，则路由器将上升一个级别。

角度9-如何路由到延迟加载的组件之外的路径？

1 个答案: