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>

为了更好地理解，了解你的功能需要（输入）以及它应该做什么会很好。

服务解决方案很简洁。

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

1 个答案: