角2 - サービスとして他のコンポーネントを使用し、そのデータをラダーする方法

Question

私は現在、角度2でDIに深く取り組んでいます。 私はTilesComponentの親コンポーネントであるHomeComponentを1つ持っています。

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

ホームコンポーネントからのレポートデータを、タイルコンポーネントのプロパティレポートにバインドして正常に動作します。

は今、私はそれを使用することができますし、ホームコンポーネントからのデータとselectedCurrencyShortデータを報告して取得する方法の例の成分Bのために、他のコンポーネント内

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

を配置する必要がありますか？どのように正しく注入する必要がありますか（私は何とか私のHomeComponentをサービスとして使いたいですか？）多くのありがとう！あなたはデータを保持するために別々のサービスを作成することができ

Answer 1

：

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

あなたの主なコンポーネント（アプリケーションまたはそのような何か）であなたがプロバイダに追加します。

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

次にあなたが注入それを必要なすべてのコンポーネントに追加します。

export class TilesComponent { 
    constructor(..., 
       private _reportService: ReportService) { 
     // ... 
    } 

    // ... 
} 

export class HomeComponent { 
    constructor(..., 
       private _reportService: ReportService) { 
     // ... 
    } 

    // ... 
} 

export class ComponentB { 
    constructor(..., 
       private _reportService: ReportService) { 
     // ... 
    } 

    // ... 
} 

テンプレートには、 IKEこの：

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

次に、あなたはもう@Inputとそれを渡す必要はありません！ :)