Angular2：コンポーネントでヘルパー関数を使用する最も効率的な方法

Question

このコンポーネントは、angular2ドキュメントから直接です。 showOrNot関数の戻り値に基づいて、コンポーネントの単純なショーやないためのテンプレートで次に

import { Component, Input, OnInit } from '@angular/core'; 
import { ActivatedRoute, Params } from '@angular/router'; 
import { Location }     from '@angular/common'; 

import { Hero } from './hero'; 
import { HeroService } from './hero.service'; 

// IMPORTING HELPER FUNCTION FROM LIB 
import { 
    showOrNot 
} from '../helpers'; 

@Component({ 
    moduleId: module.id, 
    selector: 'my-hero-detail', 
    templateUrl: 'hero-detail.component.html' 
}) 

export class HeroDetailComponent implements OnInit { 
    // USING IMPORTED HELPER FUNCTION FROM LIB 
    showOrNot: showOrNot; 

    constructor(
     private heroService: HeroService, 
     private _activatedRoute: ActivatedRoute, 
     private location: Location 
    ) {} 

    @Input() 
    hero: Hero; 

    goBack(): void { 
     this.location.back(); 
    } 

    ngOnInit(): void { 
     this._activatedRoute.params.forEach((params: Params) => { 
      let id = +params['id']; 
      this.heroService.getHero(id) 
       .then(hero => this.hero = hero); 
     }); 
    } 
} 

：

私が追加した唯一の変更は、このコンポーネントへの他のファイルからの関数のインポートです。

<div *ngIf="showOrNot()"> 
    <h1>{{hero.name}} details!</h1> 
    <div><label>id: </label>{{hero.id}}</div> 
    <div> 
     <label>name: </label> 
     <input [(ngModel)]="hero.name" placeholder="name"/> 
    </div> 
    <button (click)="goBack()">Back</button> 
</div> 

の機能が含まれて、私はこのコードを理解することができる、それが清楚だ、これ以上のコンポーネントのみを使用するには、全体の多くにしていないと言われています。

しかし、これを最適化する方法はありますか？このコードをテンプレートで使用するには、コンポーネントにインポートするだけでなく、コンポーネント内の別のクラスメソッドでも参照する必要があります。

ヘルパークラスのメソッドをテンプレートから直接呼び出す方法はありますか？

Answer 1

helperServiceを作成し、コンポーネントに挿入して、テンプレートで使用できます。

constructor(
     private heroService: HeroService, 
     private _activatedRoute: ActivatedRoute, 
     private location: Location, 
     private helperService: HelperService, 
    ) {} 

<div *ngIf="helperService.someHelperFunction()"> 
    <h1>{{hero.name}} details!</h1> 
    <div><label>id: </label>{{hero.id}}</div> 
    <div> 
     <label>name: </label> 
     <input [(ngModel)]="hero.name" placeholder="name"/> 
    </div> 
    <button (click)="goBack()">Back</button> 
</div> 

あなたの関数が必要とするもの（入力）と何をすべきかを知ることは、より良いことです。

サービスソリューションはきちんとしています。