javascript - Angular 2 - 如何使用其他组件作为服务并获取其数据

Question

我目前正在深入研究 Angular 2 中的 DI。我有一个组件，HomeComponent，它是我的 TilesComponent 的父组件。

在图 block 组件中我只有:

@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 连接，因此我在 home 组件 html 中定义:

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

我将主页组件中的报告数据绑定(bind)到图 block 组件中的属性报告，并且工作正常。

现在，我需要把

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

在其他组件内，例如组件 B。如何使用它并从 Home 组件获取报表数据和 selectedCurrencyShort 数据？需要如何正确注入(inject)它(我想以某种方式使用我的 HomeComponent 作为服务)？非常感谢!

Answer 1

您可以创建一个单独的服务来保存数据:

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

在您的主要组件(应用程序或类似的组件)中，您将其添加到提供程序:

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

然后将其注入(inject)到需要它的所有组件中:

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

    // ...
}

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

    // ...
}

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

    // ...
}

在您的模板中，您可以像这样绑定(bind)它:

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

那么你就不再需要用@Input来传递它了! :)