Angular 2：在组件中使用辅助函数的最有效方法

Question

这个组件直接来自于angular2文档。

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

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>

我欣赏这段代码及其整洁性，上述组件仅包含其被告知的函数而不是全部。

但是，有没有一种优化的方法？为了在模板中使用此代码，我不仅需要将其导入到组件中，还需要在组件内的另一个类方法中引用它。

有没有一种直接从模板调用辅助类方法的方法，而无需通过另一个函数将其路由？

- user1037355

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>

为了更好地理解，我们需要知道您的函数需要什么（输入）以及它应该做什么。

服务解决方案是一个不错的选择。

- jmachnik