Инъекционные услуги в Угловом декораторе
Я хочу использовать инъекционный сервис, который читается для изменений в другом компоненте, в пользовательском декораторе.
Проблема в том, что у меня нет конструктора для внедрения этого сервиса, если я создаю экземпляр этого сервиса, компонент, который читает его, явно не считывает изменение.
Как я могу сделать это?
Я добился определенного прогресса, изменив исходный конструктор на другой, в котором есть служба, которую я хочу внедрить, и другие параметры из оригинала. При этом у меня есть служба, и я могу получить доступ к методам в ней, но выдает ошибку при попытке вызвать его в компоненте:
Код:
const navbar= <T>(originalConstructor: new(...args: any[]) => T) => {
function newConstructor(navbarService: NavbarService, ...args) {
new originalConstructor(navbarService, args);
}
//Here I can take the service for operate with it, I think
newConstructor.prototype = originalConstructor.prototype;
return newConstructor;
}
@Component({
selector: 'app-wizard',
templateUrl: './wizard.component.html',
styleUrls: ['./wizard.component.scss']
})
@navbar //Here it throws me the error belo
export class WizardComponent {
constructor(
private formBuilder : FormBuilder,
private snackBar : MatSnackBar,
private router : Router
) {}
}
Ошибка:
[ts]
Unable to resolve signature of class decorator when called as an expression.
Type '(navbarService: NavbarService, ...args: any[]) => void' is not assignable to type 'typeof WizardComponent'.
Type '(navbarService: NavbarService, ...args: any[]) => void' provides no match for the signature 'new (formBuilder: FormBuilder, snackBar: MatSnackBar, router: Router): WizardComponent'.
Не обращая на это внимания, я ищу другое решение, которое решает основную проблему: внедрение сервисов в декоратор.
Вот код декоратора, компонент, который его вызывает, сервис и компонент, ожидающий изменения сервиса соответственно:
Декоратор и компонент, который называет это:
const navbar= <T>(originalConstructor: new(...args: any[]) => T) => {
function newConstructor(navbarService: NavbarService, ...args) {
new originalConstructor(navbarService, args);
}
//Here I can take the service for operate with it, I think
newConstructor.prototype = originalConstructor.prototype;
return newConstructor;
}
@Component({
selector: 'app-wizard',
templateUrl: './wizard.component.html',
styleUrls: ['./wizard.component.scss']
})
@navbar //Here it throws me the error below
export class WizardComponent {
constructor(
private formBuilder : FormBuilder,
private snackBar : MatSnackBar,
private router : Router
) {}
}
Сервис:
@Injectable({ providedIn: 'root' })
export class NavbarService {
service = new BehaviorSubject(null);
constructor() { }
openNavbar() {
this.service.next('open');
}
closeNavbar() {
this.service.next('close');
}
}
Компонент, ожидающий изменения сервиса:
@ViewChild('sidenav') sidenav: MatSidenav;
constructor(
private navbarService : NavbarService
) {}
ngOnInit() {
this.navbarService.service.subscribe(options => {
if(options == 'open') this.sidenav.open();
else if(options == 'close') this.sidenav.close();
});
}
Заранее спасибо.
Изменить: я нашел частичное решение, но он сосредоточен на функции декоратор, мне нужно аналогичное решение для компонента / декоратор класса.
Вот решение, которое мне нужно изменить!