2 각도 - 서비스로 다른 구성 요소를 사용하여 데이터

Question

나는 현재 내가 하나 개의 구성 요소, 내 TilesComponent에 상위 구성 요소 인 HomeComponent이 2 각도 에서 DI에 깊은 작업을 RAD하는 방법에 대해 설명합니다.

<div class="ui-g"> 
       <div class="ui-g-2 ui-md-2"> 
        <div class="panel panel-default" style="width:100%; height:40%;text-align:center;"> 
         <div class="panel-body"> 
         <div class="row"><h5>Total Assets</h5></div> 
         <div class="row">{{selectedCurrencyShort}} {{report.TotalAsset}}</div> 
        </div> 
       </div> 
       </div> 
       <div class="ui-g-2 ui-md-2"> 
        <div class="panel panel-default" style="width:100%; height:40%;text-align:center;"> 
         <div class="panel-body"> 
         <div class="row"><h5>Total Liquidity</h5></div> 
         <div class="row">{{selectedCurrencyShort}} {{report.TotalLiquidity}}</div> 
        </div> 
       </div> 
       </div>  
       <div class="ui-g-2 ui-md-2"> 
        <div class="panel panel-default" style="width:100%; height:40%;text-align:center;"> 
         <div class="panel-body"> 
         <div class="row"><h5>Unerealised P/L</h5></div> 
         <div class="row">{{selectedCurrencyShort}} {{report.TotalProfit}}</div> 
        </div> 
       </div> 
       </div> 
       <div class="ui-g-2 ui-md-2"> 
        <div class="panel panel-default" style="width:100%; height:40%;text-align:center;"> 
         <div class="panel-body"> 
         <div class="row"><h5>Performance TWR</h5></div> 
         <div class="row">{{report.TWPerformance | number:'.1-2'}}%</div> 
        </div> 
       </div> 
       </div> 
       <div class="ui-g-2 ui-md-2"> 
        <div class="panel panel-default" style="width:100%; height:40%;text-align:center;"> 
         <div class="panel-body"> 
         <div class="row"><h5>Capital In/Out Flow</h5></div> 
         <div class="row">{{selectedCurrencyShort}} {{report.TotalInOutAmount}}</div> 
        </div> 
       </div> 
       </div> 
       <div class="ui-g-2 ui-md-2"> 
        <div class="panel panel-default" style="width:100%; height:40%;text-align:center;"> 
         <div class="panel-body"> 
         <div class="row"><h5>Performance</h5></div> 
         <div class="row">{{selectedCurrencyShort}} {{report.Performance}}</div> 
        </div> 
       </div> 
       </div>  
      </div> 

내가 내 HomeComponent으로 연결해야합니다, 그래서 집에 구성 요소 HTML 안에 정의 :

@Component({ 
    selector:'tiles', 
    templateUrl: 'app/tiles/tile.component.html', 

}) 


export class TilesComponent{ 
    @Input() report: any; 
    @Input() selectedCurrencyShort: any; 

    constructor(private _authService: AuthService, private router: Router, private location: Location, private _insaService: InsaService) { 

     if (!this._authService.isLoggedIn()) { 
      this.location.replaceState('/'); 
      this.router.navigate(['LoginComponent']); 
      return; 
     } 
    } 



} 

및 템플릿 : 타일 구성 요소에서

나는 단지이

<tiles [report]="report" [selectedCurrencyShort]="selectedCurrencyShort"></tiles> 

홈 구성 요소의 보고서 데이터를 내 타일 구성 요소의 속성 보고서에 바인딩하면 정상적으로 작동합니다.

는 지금, 나는 예를 들어, 구성 요소 B. 나는 홈 구성 요소에서 데이터 및 selectedCurrencyShort 데이터를보고하는 방법을 사용하고 얻을 수에 대한 다른 구성 요소 내부

<tiles [report]="report" [selectedCurrencyShort]="selectedCurrencyShort"></tiles> 

을 넣어해야합니까? 어떻게 제대로 주입 할 필요가 있습니까? (저는 어떻게해서 HomeComponent를 서비스로 사용하고 싶습니까?) 많은 감사드립니다! 당신이 공급자에 추가 (같은 앱이나 뭐) 주요 구성 요소에서

@Injectable() 
export class ReportService { 
    public report: any; 
    public selectedCurrencyShort: any; 
} 

:

Answer 1

당신은 보유 데이터를 별도의 서비스를 만들 수

@Component({ 
    ... 
    providers: [ReportService] 
}) 
export class App {...} 

을 그런 다음 주입 모든 필요한 구성 요소에 넣으십시오.

그리고 템플릿에 l 이케이 :

<div class="row">{{_reportService.selectedCurrencyShort}} {{_reportService.report.TotalAsset}}</div> 

그런 다음 당신은 더 이상 @Input로를 통과 할 필요가 없습니다! :)