Angular 8 ActivatedRoute 参数没有得到

Question

我在尝试以下方法时，在角度使用 ActivatedRoute 时从 url 获取参数时遇到问题。

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PartPriceComponent } from './part-price/part-price.component';


const routes: Routes = [
  { path: "product/:device", component: PartPriceComponent }
];

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

part-price.component.ts

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

@Component({
  selector: 'app-part-price',
  templateUrl: './part-price.component.html',
  styleUrls: ['./part-price.component.css']
})
export class PartPriceComponent implements OnInit {
  public deviceSelectedVal: any;
  constructor(private route: ActivatedRoute) {
     this.route.paramMap.subscribe(
       (params: any) => {
         this.deviceSelectedVal = params.get('device');
     })
    }
    
    ngOnInit(): void {
    console.log('this.deviceSelectedVal', this.deviceSelectedVal)
  }
}

我正在尝试传递这样的 URL http://localhost:4200/product/pixel

Answer 1

只需尝试在激活的路由上订阅参数。像这样，

this.route.params.subscribe((params) => {
    this.deviceSelectedVal = params['device'];
    console.log('New device detected', this.deviceSelectedVal);
})

在 ngOnInit 生命周期钩子中添加订阅，或者保持它在构造函数中添加它的方式（但是构造函数应该只用于初始化类成员，而不应该做实际的“工作”）。

Answer 2

您的视图中是否有

<router-outlet></router-outlet>

组件？

RouterOutlet

“充当 Angular 根据当前路由器状态动态填充的占位符。”所以，你需要它的角度来理解根据你的路线应该呈现什么。

比如我设置了如下路由：

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

我的 main.ts 文件包含以下代码来引导 AppModule：

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

AppModule botstraps AppComponent：

bootstrap: [AppComponent]

在 app.component.html 里面我只有 RouterOutlet，所以内容是动态呈现的：

<main>
  <router-outlet></router-outlet>
</main>

我还要提到我现在在 index.html 中有一个基本 url 设置为“browsertest”，只是为了提供一些上下文。现在，当 url browsertest/test/1 被调用时，AppComponent 被加载，它里面的路由器出口完成它的工作渲染（在我的例子中）TestComponent 和解析 url 参数（在我的例子中是 :id）。

在我的 TestComponent 中，我在构造函数中传递了一个 ActivatedRoute 实例，并在 OnInit 方法中捕获了 id 值（我想我在 this guide 中找到了它）：

@Component({
  selector: 'test-component',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {

  constructor(private route: ActivatedRoute) {
  }

  id: string | null | undefined = '';
  

  ngOnInit(): void {
    this.route.paramMap.subscribe(
      (params: ParamMap) => {
        this.id = params.get('id');
      });

就这样对我有用。我一开始的错误是我忽略了 component.html 中的

<router-outlet></router-outlet>

。

附言我遇到的另一个问题是路由器插座会复制内容。发生这种情况是因为一开始我会将路径渲染的组件设置为 AppComponent ：

{path: 'test/:id', component: AppComponent},];

，而 AppComponent 里面有一些内容。所以会发生的是，首先 main.ts 将引导一个 AppModule，其中带有一些内容的 AppComponent 和路由器出口是引导程序，并且由于设置了路由，在路由器出口内部另一个 AppComponent 是引导程序。所以我通过在 AppComponent 中只保留 router-outlet 并将内容包装到另一个组件中来解决它。

Answer 3

如果您不打算在您正在访问它的同一组件中更新

device

参数，那么您可以从快照中获取它。

this.route.snapshot.paramsMap.get('device')

Answer 4

尝试在 ngOnInit 下提供你的逻辑。我希望这能解决您的问题。

ngOnInit() {
  this.route.paramMap.subscribe(
       (params: any) => {
         this.deviceSelectedVal = params.get('device');
     });
}

Answer 5

this.route.params.subscribe

是异步的，所以

console.log('this.deviceSelectedVal', this.deviceSelectedVal)

这将在

this.deviceSelectedVal = params.get('device');

之前被调用

在下面添加您的 console.log

this.deviceSelectedVal = params['device'];