Инъекционные услуги в Угловом декораторе

Я хочу использовать инъекционный сервис, который читается для изменений в другом компоненте, в пользовательском декораторе.

Проблема в том, что у меня нет конструктора для внедрения этого сервиса, если я создаю экземпляр этого сервиса, компонент, который читает его, явно не считывает изменение.

Как я могу сделать это?

Я добился определенного прогресса, изменив исходный конструктор на другой, в котором есть служба, которую я хочу внедрить, и другие параметры из оригинала. При этом у меня есть служба, и я могу получить доступ к методам в ней, но выдает ошибку при попытке вызвать его в компоненте:

Код:

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();
    });
  }

Заранее спасибо.

Изменить: я нашел частичное решение, но он сосредоточен на функции декоратор, мне нужно аналогичное решение для компонента / декоратор класса.

Вот решение, которое мне нужно изменить!

0 ответов

Другие вопросы по тегам