代码之家 › 专栏 › 技术社区 › ValRob

如何使用角度中的不同参数更新相同组件

reload router angular-ui-router parameters angular

4

ValRob · 技术社区 · 8 年前

我已经完成了 tour of heroes 从角度。它工作得很好。

现在我想把仪表板组件放在hero细节视图中。它向我展示了英雄的顶部,然后是英雄的细节视图。 Image

我有一个路由器链接,加载相同的组件,但参数不同。我想知道该怎么做,当我点击仪表板上的任何元素时,这一个加载一个不同的英雄。

这是英雄细节的代码。组成部分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 }
];

糟糕的解决方案:

经过一点研究,我发现可以添加 (单击)=“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 回复 | 直到 8 年前

1

4

DeborahK 8 年前

订阅参数而不是使用快照。这就是我的样子:

ngOnInit(): void {
    this.route.params.subscribe(
        params => {
            const id = +params['id'];
            this.getProduct(id);
        }
    );
}