Angular 2 - 如何使用其他組件作爲服務和rad數據

Question

我目前在Angular 2的DI上工作很深。 我有一個組件，它是我的TilesComponent的父組件。

在瓷磚分量，我只有：

@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; 
     } 
    } 



} 

和模板：

<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裏面：

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

其中我將來自Home組件的報表數據綁定到我的tile組件中的屬性報告，它工作正常。

現在，我需要把

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

其他組件內，例如組件B.我如何使用它，並從主頁組件報表數據和selectedCurrencyShort數據？它需要如何正確注入（我想以某種方式使用我的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傳下來了！ :)