Angular 5 router.navigate無法正常工作

Question

我正在嘗試根據某種條件將用戶重定向到另一個頁面。 這是我的示例登錄組件：

  ngOnInit() {
    console.log(">>> router", this.router)
    console.log(">>> activatedRoute", this.activatedRoute)

    if (this.activatedRoute.queryParams['value'].param === 'value') {
      console.log(">>> redirecting")
      this.router.navigate(['home']);
    }
  }

如果我導航到沒有參數的登錄組件，那么將顯示登錄組件模板，這很好。

但是，當我使用名為param的參數和value的值導航到登錄組件時，我想將用戶重定向到主頁。 那不行

這是我的首頁路線：

import { NgModule } from '@angular/core';

import { HomeComponent } from './home.component';
import { RouterModule, Routes } from '@angular/router';

const thisRoute: Routes = [
  {
    path: 'home',
    component: HomeComponent
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(thisRoute, {
      useHash: true, initialNavigation: false
    })
  ],
  declarations: [
    HomeComponent
  ]
})
export class HomeModule { }

我已經在github中創建了一個測試項目，供您下載並在您的計算機上運行。 只需下載此項目： https : //github.com/wvary/route-test

運行npm install 。

然后運行npm run start 。

導航到http：// localhost：8080 /＃/ home

您應該看到類似以下內容：

通過單擊三個鏈接，可以查看每個頁面的內容。 當您單擊中間鏈接時，該想法將顯示在主頁上。

謝謝

Answer 1

試試這個this.router.navigate(['../home']);

Answer 2

queryParams是可觀察的，因此無法以這種方式從中獲取參數。 這里要注意的另一件事是，在此版本的Angular中，queryParams已由queryParamMap取代。

這里描述了如何正確使用它。

Answer 3

請嘗試以下方法：

const thisRoute: Routes = [
  {
    path: 'home',
    component: HomeComponent
  }
];
export const routing = RouterModule.forRoot(thisRoute);

@NgModule({
  imports: [
   routing
    })
  ],
  declarations: [
    HomeComponent
  ]
})