没有Modal Angular2的提供者
发布时间:2020-12-17 17:44:20 所属栏目:安全 来源:网络整理
导读:我试图在指令的构造函数中使用可选参数但由于错误“没有Modal的提供者”而一直都不成功. 我有一个带有组件的Modal类,我订阅了modal.shown()以专注于我的指令.现在,我想使用相同的指令甚至强制关注其他一些元素.因此,我计划使用模态的可选参数,以便仅在构造函
我试图在指令的构造函数中使用可选参数但由于错误“没有Modal的提供者”而一直都不成功.
我有一个带有组件的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(); } } 这在Modal的情况下效果很好,即,当我使用指令tabFocus到模态的html元素时,焦点完美地存在.但每当我将该指令用于另一个按钮元素时,代码就会中断并且我得到错误“没有Modal的提供者”. 我想用简单的语言实现的目标是:我希望能够将同一指令用于两个不同的目的. 1)当有模态时,模态上的元素应该得到焦点. 2)当没有模态,并且指令附加到元素时,该元素应该只是获得焦点. 解决方法
实际上,您可以简单地使用Angular方式定义Optional参数.现在?:是用于定义可选参数的打字稿方式.
import { Optional } from "@angular/core"; 在私有模态前面添加@Optional():模态 并检查this.modal是否为真,即 if(this.modal){ //do something. } 这应该可以解决问题.希望能帮助到你. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |