Angular 11,路由参数在我的情况下不起作用
Angular 11,Route Parameters not working in my case
我一直面临 angular 参数的问题,因为我可以导航路径路由,但是当它调用参数时,我无法获取 id
问题:
enter image description here
如何解决这个问题请帮助我
app-routing
----------
const routes: Routes = [
{path:"", redirectTo:"home", pathMatch:"full"},
{path:"home",component:HomeComponent},
{path:"product",component:ProductComponent},`enter code here`
{path:"prod-details/:id",component:ProductDetailsComponent},
];
当我尝试通过错误声明变量时
product-details.ts
--------------------
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute} from '@angular/router';
@Component({
selector: 'app-product-details',
templateUrl: './product-details.component.html',
styleUrls: ['./product-details.component.css']
})
export class ProductDetailsComponent implements OnInit {
constructor(private rout:ActivatedRoute) { }
product_id="";
ngOnInit(): void {
this.product_id = this.rout.snapshot.paramMap.get('id');
}
}
这样测试,希望有用:
ngOnInit(): void {
this.rout.params
.subscribe( ({id}) => {
this.product_id = id;
})
}
这个有效
ngOnInit() {
this.activatedRoute.paramMap.subscribe(params => {
if (params.get('id')) {
this.paramId = params.get('id');
}
});
}
我一直面临 angular 参数的问题,因为我可以导航路径路由,但是当它调用参数时,我无法获取 id
问题: enter image description here
如何解决这个问题请帮助我
app-routing
----------
const routes: Routes = [
{path:"", redirectTo:"home", pathMatch:"full"},
{path:"home",component:HomeComponent},
{path:"product",component:ProductComponent},`enter code here`
{path:"prod-details/:id",component:ProductDetailsComponent},
];
当我尝试通过错误声明变量时
product-details.ts
--------------------
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute} from '@angular/router';
@Component({
selector: 'app-product-details',
templateUrl: './product-details.component.html',
styleUrls: ['./product-details.component.css']
})
export class ProductDetailsComponent implements OnInit {
constructor(private rout:ActivatedRoute) { }
product_id="";
ngOnInit(): void {
this.product_id = this.rout.snapshot.paramMap.get('id');
}
}
这样测试,希望有用:
ngOnInit(): void {
this.rout.params
.subscribe( ({id}) => {
this.product_id = id;
})
}
这个有效
ngOnInit() {
this.activatedRoute.paramMap.subscribe(params => {
if (params.get('id')) {
this.paramId = params.get('id');
}
});
}