如何解决如何从自定义确认装饰器访问自定义服务和对话框
如何访问角度依赖注入中的单例实例?
我想用这种方式为确认对话框编写自定义装饰器。
装饰器实现:
import {NgplDialogConfirmModel,NgplDialogService} from '../dialog';
import {take} from 'rxjs/operators';
export function Confirmable(options?: NgplDialogConfirmModel,confirm = 'confirmService') {
// our factory function will return our actual decorator function,but Now we have
// an actual options object to configure our alert Box :)
return (target: Object,propertyKey: string,descriptor: PropertyDescriptor) => {
// the usual,caching the original implementation
const originalMethod = descriptor.value;
// default values for our config,we’ll overwrite this with our options parameter
console.log('target',target);
console.log('propertyKey',propertyKey);
console.log('descriptor.value',descriptor.value);
console.log('target[confirm]',target[confirm]);
const service: NgplDialogService = target && target[confirm];
if (!service) {
return descriptor;
}
descriptor.value = function(...args: any[]) {
const dialogRef = service.confirm(options);
return dialogRef
.pipe(
take(1)
)
.subscribe((confirmed: boolean) => {
if (!!confirmed) {
originalMethod.apply(this,...args);
}
});
};
return descriptor;
};
}
此处使用
@Confirmable()
confirmDelete(action): void {
console.log('action',action);
}
我有自己的服务与 matDialog 集成并确认我在任何地方使用的操作。
@Injectable({
providedIn: 'root'
})
export class NgplDialogService {
constructor(private dialog: MatDialog) {
}
public confirm(data: any= {}): Observable<boolean> {
data.title = data.title || 'Confirm';
data.message = data.message || 'Are you sure?';
data.showCancel = data.showCancel || true;
data.showIcon = data.showIcon || true;
let dialogRef: MatDialogRef<ConfirmComponent>;
console.log('this.dialog',this.dialog);
dialogRef = this.dialog.open(ConfirmComponent,{
width: '480px',disableClose: true,data,backdropClass: 'confirm-backdrop-class',panelClass: 'confirm-panel-class'
});
return dialogRef.afterClosed();
}
}
我尝试了一些方法,如 Injertor.create 和 ReflectiveInjector(已弃用),但我无法访问我的服务实例。
我试图访问从装饰器注入到组件内部的确认服务,但装饰器在组件依赖注入完成之前执行。
解决方法
在互联网上阅读了多次相同的文章后,我再次阅读了这一篇,https://medium.com/capital-one-tech/custom-typescript-decorators-using-rxjs-and-angular-services-6ddd1079f683,我更好地理解了这种方法,并在我的 stackbliz 代码中尝试了它,并且它有效。 https://stackblitz.com/edit/angular-ivy-2bpgfc?file=src%2Fapp%2Fapp.component.ts
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。