如何將一個組件的變量值用於另一個組件？

我有一個列表，關於選擇一個列表項，我打電話給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

如何將一個組件的變量值用於另一個組件？

回答

相關問題