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> 

더 잘 이해하려면 함수가 필요로하는 것과 입력해야 할 것이 무엇인지 알아야합니다.

서비스 솔루션은 깔끔한 서비스입니다.