あるコンポーネントから別のコンポーネントへの可変値の使用方法は？

Question

私はリストを持っていますが、リストアイテムを選択するにはonSelect()と呼んでいます。

onSelect()では、selectedHero変数に選択した値を配置します。他のコンポーネントのselectedHero変数でこの値を使用する方法。私のコードは以下の通りです。

import { Component } from '@angular/core'; 

export class Hero { 
    name: string; 
} 

const HEROES: Hero[] = [ 
    { name: 'STWX1' }, 
    { name: 'STWX2' }, 
    { name: 'STWX3' }, 
    { name: 'STWX4' } 
]; 

@Component({ 
    selector: 'my-app', 
    template: ` 
     <div style="display: inline-block; width = 200px; "> 
      <ul class="heroes"> 
       <li *ngFor="let hero of heroes" (click)="onSelect(hero)" 
        [class.selected]="hero === selectedHero"> 
        <p>{{hero.name}}</p> 
       </li> 
      </ul> 
     </div>' 
    , 
    styles: [...] 
}) 

export class AppComponent { 
public showStyle: boolean = false; 

    name = 'Angular1'; 
    testRequestId = '3224'; 
    heroes = HEROES; 
    selectedHero: Hero; 

    goToDivClick() { 
     return HEROES; 
    } 

    onSelect(hero: Hero): void { 
     this.selectedHero = hero; 
    } 
} 

他のコンポーネントでthis.selectedHero値を使用するにはどうすればよいですか。

Answer 1

あなたは指令[valueToPass] = "valuepassed"と@Input（）valueToPassデコレータを使用して受信を使用してパス値を渡すことができます。

または単一のサービス・インスタンスをこのように使用すると、そのサービスの内部にいくつかの値を設定することができるプロバイダを使用して注入され、その値が

Answer 2

これは、値を渡す他のコンポーネントがどこにあるかによって異なります。上記のコンポーネントの子であれば、@Input()デコレータを使用できます。それ以外の場合は、サービスを利用する必要があります。