Angular 如何使用从一个组件到另一个组件的变量值？

我有一个列表，在选择列表项时，我调用

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;
    }
}

从'@angular/core'导入{Component}；
出口级英雄{
名称：字符串；
}
康斯特英雄：英雄[]=[
{name:'STWX1'}，
{name:'STWX2'}，
{name:'STWX3'}，
{name:'STWX4'}
];
@组成部分({
选择器：“我的应用程序”，
模板：`


{{hero.name}



'
,
样式：[……]
})
导出类AppComponent{
公共显示样式：布尔值=false；
名称='Angular1'；
testRequestId='3224'；
英雄=英雄；
选择英雄：英雄；
goToDivClick（）{
回归英雄；
}
onSelect（英雄：英雄）：无效{
this.selectedHero=英雄；
}
}

---

如何在其他组件中使用此。selectedHero值。

这取决于要将值传递到的其他组件的位置。如果它们是上述组件的子级，则可以使用decorator。在其他情况下，您必须使用服务

您可以使用指令[valueToPass]=“valuepassed”传递传递值，并使用@Input（）valueToPass装饰器接收传递值

或者，您可以使用服务，因为单个服务实例是使用提供者注入的，因此您可以在该服务内设置一些值，并且该值可以在同一模块内的另一个组件中访问