Angular 2 - wie andere Komponente als Service und rad seine Daten verwenden

Question

Ich arbeite derzeit tief auf DI in Angular 2. Ich habe eine Komponente, eine HomeComponent, die eine Elternkomponente zu meiner TilesComponent ist.

In Fliesen Komponente habe ich nur:

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



} 

und in Vorlage:

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

ich es mit meinem HomeComponent verbinden müssen, so definiere ich innen nach Hause Komponente html:

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

wo ich Berichtsdaten von Home-Komponente an Eigenschaft Bericht in meiner Kachel-Komponente binden und es funktioniert gut.

Nun, ich brauche

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

innerhalb einer anderen Komponente zu setzen, zum Beispiel Komponente B. Wie kann ich es nutzen und von zu Hause Component Berichtsdaten und selectedCurrencyShort Daten? Wie muss es richtig injiziert werden (Ich möchte irgendwie meine HomeComponent als Service verwenden) Vielen Dank!

Answer 1

Sie könnten einen separaten Dienst erstellen, die Daten zu halten:

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

In Ihrer Hauptkomponente (App oder so ähnlich) Sie es an die Anbieter hinzufügen:

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

Dazu injiziert es in alle Komponenten, wo Sie es brauchen:

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

    // ... 
} 

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

    // ... 
} 

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

    // ... 
} 

Und in Ihrer Vorlage binden Sie daran l diese ike:

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

Dann brauchen Sie nicht es mit @Input zu überliefern mehr! :)