2016-10-26 3 views
3

Я пытаюсь использовать необязательные параметры здесь, в конструкторе директивы, но все время был неудачным из-за ошибки «Нет провайдера для модальных».Нет провайдера для Modal Angular2

У меня есть модальный класс с компонентом, и я подписываюсь на 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(); 
    } 

} 

Это прекрасно работает в случае модального то есть, когда я использую директиву TabFocus в HTML элемент модальной, фокус идет там отлично. Но всякий раз, когда я использую директиву для другого элемента кнопки, код ломается, и я получаю сообщение об ошибке «No Provider for Modal».

Что я хочу достичь простыми словами: я хочу иметь возможность использовать ту же директиву для двух разных целей. 1) Когда есть модальный, элемент на модальном должен получить фокус. 2) Когда мода не существует, а директива привязана к элементу, этот элемент должен просто получить фокус.

+0

Можете ли вы разместить содержание 'modal.ts'? – Baumi

+0

да, пожалуйста, напишите несколько modal.ts, чтобы получить представление. – ShellZero

ответ

5

На самом деле вы можете просто использовать Угловой способ определения необязательных аргументов. Прямо сейчас ?: - это машинописный способ определения необязательных аргументов.

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

Добавить @Optional() перед private modal: Modal

и проверить, если this.modal верно то,

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

Это должно сделать трюк. Надеюсь, поможет.

+0

Прохладный. Я все время пропускаю импорт! Благодаря! –

Смежные вопросы