Question

我在使用角路由时遇到了奇怪的情况。（7.2.9-我当前的语言版本）我当前的网址是localhost:8080/en/myApp/home.html?q=name 我在Angular路由中使用了哈希路由方法，我想将其附加到上述预先存在的url (localhost:8080/en/myApp/home.html?q=name#/list)

app.module.ts具有如下的appRoutes

const appRoutes: Routes = [
  { path: 'list', component: ListComponent },
  { path: 'pdp', component: ProductComponent}
];

当我进入主页时，我使用this.router.navigate方法来手动列出组件。里面有路由器插座，下面有代码

ngOnInit(){
this.router.navigate(['/list'])
}

在列表组件中，我动态列出了锚标记

    <div class="innerclass--productImage">
       <a [routerLink]="product.productURL">
         <img src="{{product.imageURL}}">
       </a> 
    </div>

当我单击其中之一时，我的URL现在更改为(localhost:8080/en/myApp/home.html?q=name#/pdp).

一切似乎都工作正常，并且在单击动态列出的组件之后，该产品组件已加载。

真正的问题是当我单击浏览器的后退按钮或前进按钮，并且URL更改为-

localhost:8080/en/myApp/home.html?q=name#/list (loads the ListComponent), 
  or 
localhost:8080/en/myApp/home.html?q=name#/pdp (loads the ProductComponent) `

列表组件未显示（使用向前或向后使用浏览器时），或者未根据哈希值更改显示相应组件

我的app.module.ts使用HashLocationStrategy导入，我只使用useHash设置为true的路由。

Answer 1

不确定是否可以解决您的问题，但有一点提示。尝试检查从router.navigate解析的Promise是否返回。

从根本上来说，我正在使用7.1.4，同时也看到一些导航问题。我的应用程序中有3条路线list，load和show。显示取决于要返回的解析器。您可以通过从list到load路线进行导航，该路线在其组件中执行router.navigate，并且show组件正在等待，直到解析器将成功返回。单击周围的UI很好。浏览器的后退按钮是现在的问题之一。第二个问题是，当手动更改浏览器URL并尝试为show路由解析器时，所有xhr请求都被取消。但是，当您完全重装load页时，一切都很好。结论是，我们可以通过响应来自router.navigate

的虚假消息来修复全部重载并返回浏览操作

this.router.navigate('show').then(ok => {
  if (!ok) {
    // happens when browser back button and url change without reload
    this.router.navigate('list');
  }
});

Angular 7路由无法与“浏览器后退”按钮一起使用（哈希更改未加载组件）

1 个答案: