2016-10-26 15 views
3

私はこのディレクティブのコンストラクタでオプションのパラメータを使用しようとしていますが、 "Modalのプロバイダがありません"というエラーのために常に失敗しています。Modal Angular2のプロバイダがありません

私はコンポーネントを持つModalクラスを持っています。私はmodal.shown()を購読して、私の指示に集中しています。さて、同じディレクティブを使用して、他のいくつかの要素に力を入れるようにしたいと思います。だから、私は、コンストラクタがその引数を渡すときにだけ動作するように、モーダルのオプションの引数を使うことを計画しました。

私は次のことをやった:

import { Directive, ElementRef, OnDestroy } from "@angular/core"; 
import { Subscription } from 'rxjs/Rx'; 
import { Modal } from "./modal"; 
import * as ng from "@angular/core"; 
import { Inject } from "@angular/core"; 

@Directive({ 
    selector: "[tabFocus]" 
}) 

export class Focus implements ng.OnDestroy, ng.OnInit { 
    private _subscription: Subscription; 
    constructor(private _el: ng.ElementRef, @Inject(Modal) private modal?: Modal) { 
     if (this.modal != undefined) { 
      this._subscription = this.modal.shown.subscribe(() => this._el.nativeElement.focus()); 
     } 
    } 

    ngOnInit() { 
     this._el.nativeElement.focus(); 
    } 

    ngOnDestroy() { 
     this._subscription.unsubscribe(); 
    } 

} 

これは私がモーダルのhtml要素にディレクティブtabFocusを使用する場合、すなわち、焦点は完全にそこに行くモーダルの場合には素晴らしい作品。しかし、別のボタン要素のディレクティブを使用するたびに、コードが壊れ、「Modal用のプロバイダがない」というエラーが表示されます。

簡単な言葉で私が達成したいことは、同じ指示文を2つの異なる目的に使用できるようにすることです。 1)モーダルがある場合、モーダル上の要素はフォーカスを取得する必要があります。 2)モーダルがなく、そのディレクティブが要素に添付されている場合、その要素はフォーカスを取得するだけです。

+0

'modal.ts'のコンテンツを投稿できますか? – Baumi

+0

はい、考えを得るためにいくつかのmodal.tsを投稿してください。 – ShellZero

答えて

5

実際には、オプションの引数を定義する角度の方法を使用できます。 ?:は、省略可能な引数をtypescriptで定義する方法です。

import { Optional } from "@angular/core"; 

private modal: Modal

の前で@Optional()を追加し、this.modalこれはトリックを行う必要があり、すなわち、

if(this.modal){ 
//do something. 
} 

真であるかどうかを確認します。それが役に立てば幸い。

+0

Cool。私はいつも輸入が行方不明になっています!ありがとう! –

関連する問題