如何将一个组件的变量值用于另一个组件？

我有一个列表，关于选择一个列表项，我打电话给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值。

来源

2017-02-20 test

的https：//角。 IO /文档/ TS /最新/菜谱/组件communication.html –

可以使用指令[valueToPass] = “valuepassed”和使用@input（）valueToPass装饰接收它通过通值。

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

来源

2017-02-21 09:17:33

它取决于您想要传递值的其他组件的位置。如果他们是上述组件的子项，那么您可以使用装饰器@Input()。在其他情况下，您必须使用服务。

来源

2017-02-21 09:07:47

如何将一个组件的变量值用于另一个组件？

回答

相关问题