Angular2:在组件中使用辅助函数的最有效方法

Question

该组件直接来自angular2 docs.

我添加的唯一修改是将一个函数从另一个文件导入到该组件中:

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

然后在模板中为组件一个简单的显示或不显示基于showOrNot函数的返回.

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

为了更好地理解它,很高兴知道你的功能需要什么(输入)以及它应该做什么.

服务解决方案是一个整洁的.