Javascript 无法匹配任何路由。带参数的Angular2 URL

我有一个带有基本表单的

Home

组件。当用户提交表单时，我想用URL中的一些信息将其重定向到

Search

组件

我的主页组件：

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  worker: string;
  address: string;

  constructor(private router: Router) { }

  ngOnInit() {
  }

  doSearch() {
    this.router.navigate(['/search',  { worker: this.worker, address: this.address }]);
  }

}

我的搜索组件

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {

  constructor(private router: Router, private route: ActivatedRoute) { }

  ngOnInit() {

    let selectedWorker: string;

    console.log(this.route.params); // 
    console.log(this.route.params['worker']); // undefined

   let add = this.route.params
      .switchMap((params: Params) => {

          console.log(params);
          selectedWorker = params['worker'];
          console.log(selectedWorker); //defined


        return null;
      });

    console.log(selectedWorker); // undefined


  }

}

以及路由模块：

const appRoutes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'search', component: SearchComponent },
  { path: 'signup', component: SignupComponent },
  { path: '', redirectTo: '/', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule { }

我的问题是，当我想检索

SearchComponent

中的参数值时，我得到了

undefined

。但是当我'console'

console.log（this.route.params）时我发现我的参数如下：

它在控制台中记录对象的原因是对象是可变的。它可以在代码中的某个地方更改，日志将打印“最美好”的版本

如果您记录
console.log（JSON.stringify（this.route.params））我高度期望if再次被未定义

正确的方法如下所示：

let add = this.route.params
     .subscribe((params: Params) => {
       selectedWorker = +params['worker'];
       console.log(selectedWorker); //defined
       return null;
     });
console.log(selectedWorker); // undefined

但是如果您将
selectedWorker
记录在它的正下方，它将是未定义的，因为正如您所猜测的：路由更改是一个异步操作。
我测试了您的解决方案，但它不起作用。它甚至在switchMap（）中也给了我未定义的属性。我真的不明白发生了什么。@RadouaneROUFID
console.log（params）的作用是什么在
开关图中记录它记录：
{u isScalar:false，“Observators”：[]，“closed”：false，“isStopped”：false，“hasError”：false，“thrownError”：null，“_value”：{“worker”：“toto”，“address”：“114 bis Boulevard Raymond Poincaré”}
你是对的。出了点问题。它不能安慰任何人。我认为switchMap中的代码没有执行。啊，好吧，我错过了这部分。非常感谢你。你真的花时间帮我。我很感激。