情報をテキストボックスにプレロードするにはどうすればいいですか？

Question

私は初心者です。私はページを開くと、テキストボックスにデータをプリロードしようとしています。今、私はボタンのプリロードを押すと、それは新しいページを開き、それは私がクリックしたヒーローのプリロードするデータが欲しいところです。だから私はインデックス1のヒーローをクリックした場合、ページの開口部は、そのヒーローの詳細を事前にロードする必要があります。

//heroes.html

<tr *ngFor="let hero of Heroes; let i = index" > 
    <td>{{i + 1}}</td> 
    <td>{{hero.firstname}}</td> 
    <td>{{client.lastname}}</td> 
    <td><a class="btn btn-default" routerLink="../heroes"><em class="fa fa-search"></em></a>Preload</td> 
</tr> 

//Heroes.detail

export class HeroComponent { 

     constructor(private httpService: HttpService) { } 

     Hero = { 
      firstname: "", 
      lastname: "", 
     }; 
    } 

//サービス

getHero(id){ 
    return this.http.get('http://example.com' +id) 
     .map((response:Response) => response.json()) 

Answer 1

私はあなたがこれを解決する提案の方法、ルートであります次のclickイベントはヒーローIDを新しいページに渡します。それはあなたのコードビットを変更することを意味：

<tr *ngFor="let hero of Heroes; let i = index" > 
    <td>{{i + 1}}</td> 
    <td>{{hero.firstname}}</td> 
    <td>{{hero.lastname}}</td> 
    <td><button (click)="goToDetails(hero.id)">View Details</button></td> 
</tr> 

そして、あなたのコンポーネントで：

goToDetails(id) { 
    this.router.navigate(['detail', id]) 
} 

あなたはパラメータを渡すので、ルートは、あまりにも変更する必要があるので、あなたの細部のルートは次のようになります必要があります：

：

{ 
    path: 'detail/:id', 
    component: HeroDetailComponent 
} 

そして、あなたのDetailComponentであなたにidパラメータを購読すると、HTTPリクエストを実行コンストラクタ（民間路線：ActivatedRoute、民間のサービス：HeroService）公式ドキュメントでroutingについて

ngOnInit() { 
    this.route.params.subscribe(params => { 
    let id = params['id'] 
    this.service.getHero(id) 
     .subscribe(data => { 
     this.hero = data; 
     }); 
    }) 
} 

より。