角度：HTML /テンプレート

Question

内の他のモジュールを使用する機能を、私は、次のモジュールがあります。

// in module app/util/utils.ts 
export function isNullOrUndefined(obj: any) { 
    return obj === undefined || obj === null || obj === 'undefined' || obj === ''; 
} 

私は私のコンポーネントで機能を使用したい：

// in module app/component/component.ts 
@Component({ 
    selector: 'app-component', 
    template: ` 
    <span *ngIf="!isNullOrUndefined(value)">Should not be there</span> 
` 
}) 
export class Component { 
value = null; 
} 

しかし、私は取得していますコンポーネントがロードされ、次のエラーメッセージ：

Component.html:2 ERROR 
TypeError: _co.isNullOrUndefined is not a function 
    at Object.View_Component_1._co [as updateDirectives] (Component.html:2) 
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13065) 
    at checkAndUpdateView (core.es5.js:12245) 
    at callViewAction (core.es5.js:12610) 
    at execEmbeddedViewsAction (core.es5.js:12568) 
    at checkAndUpdateView (core.es5.js:12246) 
    at callViewAction (core.es5.js:12610) 
    at execComponentViewsAction (core.es5.js:12542) 
    at checkAndUpdateView (core.es5.js:12251) 
    at callViewAction (core.es5.js:12610) 

いずれかの助けにはならない。このような関数をインポートする：

import {isNullOrUndefined} from '../util/util'; 

これはどのように解決できますか？

Answer 1

テンプレートバインディングのスコープはcomponentインスタンスです。は、コンポーネントインスタンスが提供するものを使用できます。

あなたは

class MyComponent { 
    myIsNullOrUndefined = isNullOrUndefined; 

を追加した場合、あなたは

<span *ngIf="!myIsNullOrUndefined(value)">Should not be there</span>