如何路由到URL中带参数的组件

Question

我想通过在URL中发送参数来路由到组件，在组件中可以访问它。我无法使用 ActivatedRoute 路由到组件。

应用-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HerosComponent } from './heros/heros.component';

const routes: Routes = [{ path: 'heros/:id', component: HerosComponent }];

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

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { AppRoutingModule } from './app-rounting.module';

@NgModule({
  imports:      [ BrowserModule, FormsModule, AppRoutingModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

app.component.html

<hello name="{{ name }}"></hello>
<p>Start editing to see some magic happen :)</p>
<a (click)="routeToComponent()">Click to route</a>

app.component.ts

import { Component, VERSION } from '@angular/core';
import { CanActivate, Router } from '@angular/router';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular ' + VERSION.major;
  constructor(private router: Router) {}

  routeToComponent() {
    alert('called');
    this.router.navigate(['/heros/23']);
  }
}

heros.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

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

  constructor(private route: ActivatedRoute,) { 
    this.route.params.subscribe( params => console.log(params) );
  }

  ngOnInit() {
  }

}

stakblitz link to the application

Answer 1

URL 参数必须作为 `navigate()` 函数参数中的附加元素发送。
this.router.navigate(['/heros', 23]);

更新：

我刚刚查看了您的 Stackblitz，它似乎缺少 <router-outlet> 标签。

app.component.html

<hello name="{{ name }}"></hello>
<p>Start editing to see some magic happen :)</p>
<a (click)="routeToComponent()">Click to route</a>

<router-outlet></router-outlet>

有关 <router-outlet> 的更多信息，请参阅 here。

我已经更新了你的Stackblitz。

至于最初提出的关于传递 URL 参数的解决方案，变体 ['/heros', 23] 和 ['/heros/23'] 都有效。

如何路由到URL中带参数的组件

How to route to the components with the parameters in the URL

typescript

angular-routing

angular

更新：