[英]Angular routing - On routing to a child, View updates only on refresh of the page
I am learning routing from the example on angular docs.我正在从 angular docs 的示例中学习路由。 The problem is that on clicking an element from crisis list, crisis detail isnt displayed right after click.
问题是单击危机列表中的元素时,单击后不会立即显示危机详细信息。 If i refresh my screen, then relevant crisis detail is displayed.
如果我刷新屏幕,则会显示相关的危机详细信息。
So the question is why is the detail visible after refreshing?那么问题来了,为什么刷新后细节可见呢? Whats the solution?
解决办法是什么?
//crisis-center-routing-module.ts //危机中心路由模块.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CrisisCenterHomeComponent } from './crisis-center-home/crisis-center-home.component';
import { CrisisListComponent } from './crisis-list/crisis-list.component';
import { CrisisCenterComponent } from './crisis-center/crisis-center.component';
import { CrisisDetailComponent } from './crisis-detail/crisis-detail.component';
const crisisCenterRoutes: Routes = [
{
path: 'crisis-center',
component: CrisisCenterComponent,
children: [
{
path: '',
component: CrisisListComponent,
children: [
{
path: ':id',
component: CrisisDetailComponent
},
{
path: '',
component: CrisisCenterHomeComponent
}
]
}
]
}
];
@NgModule({
imports: [
RouterModule.forChild(crisisCenterRoutes)
],
exports: [
RouterModule
]
})
export class CrisisCenterRoutingModule { }
//crisis-list.component.html //危机列表.component.html
<h2>CRISES</h2>
<ul class="crises">
<li *ngFor="let crisis of crises$ | async" [class.selected]="crisis.id === selectedId">
<a [routerLink]="[crisis.id]">
<span class="badge">{{ crisis.id }}</span>{{ crisis.name }}
</a>
</li>
</ul>
<router-outlet></router-outlet>
//crisis-list-component.ts
import { CrisisService } from '../crisis.service';
import { Crisis } from '../crisis';
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-crisis-list',
templateUrl: './crisis-list.component.html',
styleUrls: ['./crisis-list.component.css']
})
export class CrisisListComponent implements OnInit {
selectedCrisis: Crisis;
crises: Crisis[];
crises$;
selectedId: number;
constructor(private crisisService: CrisisService, private service: CrisisService, private route: ActivatedRoute) { }
ngOnInit() {
this.crises$ = this.route.paramMap.pipe(
switchMap(params => {
this.selectedId = +params.get('id');
return this.service.getCrises();
})
);
}
onSelect(crisis: Crisis): void {
this.selectedCrisis = crisis;
}
getCrises(): void {
this.crisisService.getCrises()
.subscribe((crises) => {
this.crises = crises;
});
}
}
//crisis-detail.component.html //危机细节.component.html
<button (click)='gotoCrises(crisis)'>Back</button>
<div *ngIf="crisis">
<h2>{{crisis.name | uppercase}} Details</h2>
<div><span>id: </span>{{crisis.id}}</div>
<div>
<label>name:
<input [(ngModel)]="crisis.name" placeholder="name" />
</label>
</div>
</div>
//crisis-detail.component.ts //危机细节.component.ts
import { Observable } from 'rxjs';
import { CrisisService } from '../crisis.service';
import { Component, OnInit, Input } from '@angular/core';
import { Crisis } from '../crisis';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { switchMap } from 'rxjs/operators';
@Component({
selector: 'app-crisis-detail',
templateUrl: './crisis-detail.component.html',
styleUrls: ['./crisis-detail.component.css']
})
export class CrisisDetailComponent implements OnInit {
crisis: Crisis;
private crisis$;
constructor(private route: ActivatedRoute, private router: Router, private service: CrisisService) { }
ngOnInit() {
const id = this.route.snapshot.paramMap.get('id');
this.crisis$ = this.service.getCrisis(id);
this.crisis$.subscribe((crisis) => {
this.crisis = crisis;
});
}
gotoCrises(crisis: Crisis) {
const crisisId = crisis ? crisis.id : null;
this.router.navigate(['/crisises', { id: crisisId, foo: 'foo' }]);
}
}
The problem was that i was getting id from the url using问题是我从 url 获取 id 使用
activatedRoute.snapshot.paramMap.get('id)
activateRoute.snapshot.paramMap.get('id)
The router-outlet renders the route once.路由器出口渲染一次路由。 For other clicks in the list, the detail view isnt updated.
对于列表中的其他点击,详细视图不会更新。
In order to constantly listen to changes in id in the url, I had to subscribe to为了不断地监听url中id的变化,我不得不订阅
ActivatedRoute.url
激活路由.url
This solution was helpful https://stackoverflow.com/a/47030238/2416260此解决方案很有帮助https://stackoverflow.com/a/47030238/2416260
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.