Как использовать значение переменной из одного компонента в другой?

Question

У меня есть список, при выборе элемента списка, я звоню onSelect().

В onSelect(), я помещаю выбранное значение в переменную selectedHero. Как использовать это значение в выбранной переменнойHero в других компонентах. Мой код, как указано ниже.

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(). В других случаях вам необходимо использовать службы.