하나의 구성 요소에서 다른 구성 요소로 변수 값을 사용하는 방법은 무엇입니까?

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() 데코레이터를 사용할 수 있습니다. 다른 경우에는 서비스를 사용해야합니다.