我已实现以下代码以重定向到我的温室植物
<div *ngFor="let plant of plants" (click)="openPlant(plant)">
<div class="row">
<div class="col-md-3 p-l-0 p-r-0 my-auto">
<img src="..." class="navbar-item-icon">
</div>
<div class="col-md-9 my-auto">
{{plant.englishName}}
</div>
</div>
</div>
(单击)openPlant:
public openPlant(plant: PlantModel) {
var foundPoor = this.checkIfPlantIsPoor(plant),
this._generalService.openPlant(foundPoor, plant)
}
_ generalService openPlant:
public openPlant(foundPoor, plant: PlantModel) {
if (foundPoor) {
...
} else {
this.router.navigate(['desktop/plant/' + plant.id]);
}
}
因此,当我单击到植物时,它会重新定向。但是在将其重定向到第一个工厂后,当我单击其他人时,浏览器中的url发生了变化,但它不会重定向到实际路线!它只是停留在我单击的第一个植物上。
因此,第一次进入http://localhost:4200/desktop/plant/2,然后单击以重定向到http://localhost:4200/desktop/crop/11,浏览器中的URL更改为http://localhost:4200/desktop/crop/11,但UI保持在http://localhost:4200/desktop/plant/2
这是我的app.routing
const routes: Routes = [
...
{ path: 'desktop', loadChildren: () => import('./pages/desktop/desktop.module').then(m => m.DesktopModule) },
...
];
这里是桌面。路由:
const routes: Routes = [
...
{ path: 'plant/:id', component: PlantComponent},
...
];
这里是PlantComponent:
HTML
<div class="container">
<plant-item [plantID]=plantID></crop>
</div>
TS
ngOnInit() {
console.log(this.plantID)
var _this = this
var route = this.router.url
this.plantID = this.activated_route.snapshot.paramMap.get("id")
}
这里是PlantItemComponent TS:
...
this._plantService.currentPlants.subscribe(res => {
this.activeSeed = this._plantsService.getMyActiveSeed(res, this.plantID)
...
})
在ngOnInit上,只有当我第一次导航到第一台Plant时,才会console.log。当我单击导航到其他菜单时,它将不会console.log。
这里是一个关于路由以及我如何调用所需组件的堆栈闪电战:https://stackblitz.com/edit/angular-c9g1hl