如何在 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 =&gt; this.task = task); this.route.params.subscribe( params =&gt; const id = +params['id']; this.taskService.getTask(id); ); 控制台有错误吗?如果您在订阅中添加一个 console.log,您是否获得了 Id? 我不知道怎么做,但这个工作:this.route.params.subscribe(params =&gt; const id = +this.route.snapshot.paramMap.get('id')this.heroService.getHero(id).subscribe(Hero =&gt; this.hero = hero););

以上是关于如何在 Angular 中使用不同的参数更新相同的组件的主要内容,如果未能解决你的问题,请参考以下文章

Angular 5:用于导航到相同路线但参数不同的路线动画

相同的数据在 angular9 中显示不同。为啥?

Angular2路由器2.0.0在加载不同参数的相同url时不重新加载组件?

角度导航到具有不同参数的相同路线

Angular:如何从 httpClient 请求中获取参数并用于循环相同的请求

Angular 2路由到同一组件