如何在 Angular 中使用不同的参数更新相同的组件
Posted
技术标签:
【中文标题】如何在 Angular 中使用不同的参数更新相同的组件【英文标题】:How to update the same component with different params in Angular 【发布时间】:2018-05-28 06:27:45 【问题描述】:我已经从 Angular 完成了 tour of heroes。它完美地工作。
现在我想将仪表板组件放在英雄详细信息视图中。所以它显示了英雄的顶部,然后是英雄详细视图。 Image
我有一个加载相同组件但参数不同的路由器链接。我想知道,当我点击仪表板上的任何元素时,该怎么做才能加载不同的英雄。
这是 hero-detail.component.html 的代码
<app-dashboard></app-dashboard>
<div *ngIf="hero">
<h2> hero.name | uppercase Details</h2>
<div><span>id: </span>hero.id</div>
<div>
<label>name:
</label>
<div><span>name: </span>hero.name</div>
</div>
<button (click)="goBack()">go back</button>
<button (click)="save()">save</button>
</div>
英雄详情类
export class HeroDetailComponent implements OnInit
@Input() hero: Hero;
constructor(
private route: ActivatedRoute,
private heroService: HeroService,
private location: Location
)
ngOnInit(): void
this.getHero();
getHero(): void
const id = +this.route.snapshot.paramMap.get('id');
this.heroService.getHero(id)
.subscribe(hero => this.hero = hero);
goBack(): void
this.location.back();
save(): void
this.heroService.updateHero(this.hero)
.subscribe(() => this.goBack());
仪表板代码
<a *ngFor="let hero of heroes" class="col-1-4" routerLink="/detail/hero.id">
<div class="module hero">
<h4>hero.name</h4>
</div>
</a>
路由器同教程。
const routes: Routes = [
path: '', redirectTo: '/dashboard', pathMatch: 'full' ,
path: 'dashboard', component: DashboardComponent ,
path: 'heroes', component: HeroesComponent ,
path: 'detail/:id', component: HeroDetailComponent
];
一个糟糕的解决方案:
经过一番研究,我发现可以将 (click)="reloadRoute()" 添加到链接中,但这会刷新所有页面。
<a *ngFor="let hero of heroes" class="col-1-4" routerLink="/detail/hero.id" (click)="reloadRoute()">
<div class="module hero">
<h4>hero.name</h4>
</div>
</a>
Github
【问题讨论】:
【参考方案1】:订阅参数而不是使用快照。这是我的样子:
ngOnInit(): void
this.route.params.subscribe(
params =>
const id = +params['id'];
this.getProduct(id);
);
【讨论】:
我正在尝试这个,但它现在没有显示任何东西:ngOnInit(): void // const id = +this.route.snapshot.paramMap.get('id'); // this.taskService.getTask(id) // .subscribe(task => this.task = task); this.route.params.subscribe( params => const id = +params['id']; this.taskService.getTask(id); );
控制台有错误吗?如果您在订阅中添加一个 console.log,您是否获得了 Id?
我不知道怎么做,但这个工作:this.route.params.subscribe(params => const id = +this.route.snapshot.paramMap.get('id')this.heroService.getHero(id).subscribe(Hero => this.hero = hero););
以上是关于如何在 Angular 中使用不同的参数更新相同的组件的主要内容,如果未能解决你的问题,请参考以下文章
Angular2路由器2.0.0在加载不同参数的相同url时不重新加载组件?