Как реализовать Сервис который отвечает только за набор boolean значений Angular 2-5?

Question

[sdgroup14]

Есть много модалок... есть много кнопок.... я делаю связь через сервис... И не хватает навыков чтоб для каждой модалки-кнопки сделать 1 сервис на все. А не для каждой... пример кода ниже аналогичен для каждой модалки. На данном этапе их 5.

//Service

@Output() change: EventEmitter = new EventEmitter();

categoryModalisOpen = false;

toggleCreateCategoryModal() {
this.categoryModalisOpen = !this.categoryModalisOpen;
this.change.emit(this.categoryModalisOpen);
}

//BtnComponent

constructor(
private CreateCategoryModalService: CreateCategoryModalService
) { }

openCreteCatModal() {
this.CreateCategoryModalService.toggleCreateCategoryModal();
}

//ModalComponent

creatCatIsOpen = false;

ngOnInit() {
this.CreateCategoryModalService.change.subscribe(isOpen => {
this.creatCatIsOpen = isOpen;
});
}

constructor(
private CreateCategoryModalService: CreateCategoryModalService
) { }

Answer 1

[Евгений Калибров]

Как то так:

//Service

@Output() change: EventEmitter[];

categoryModalisOpen[] = [];

toggleCreateCategoryModal(key) {
this.categoryModalisOpen[key] = !this.categoryModalisOpen[key];
this.change[key].emit(this.categoryModalisOpen[key]);
}

//BtnComponent

@ViewChild('modalComponentInstance') // # ссылка на компонент нужного модального окна
modalComponentInstance;

constructor(
private CreateCategoryModalService: CreateCategoryModalService
) { }

openCreteCatModal() {
let key = this.modalComponentInstance.key; // Нужно подключить инстанс окна которое должно открываться по текущей кнопке 
this.CreateCategoryModalService.toggleCreateCategoryModal(key);
}

//ModalComponent

creatCatIsOpen = false;
key: number;

ngOnInit() {
this.key = this.CreateCategoryModalService.categoryModalisOpen.lenght + 1;
this.CreateCategoryModalService.change[this.key].subscribe(isOpen => {
this.creatCatIsOpen = isOpen;
});
}

constructor(
private CreateCategoryModalService: CreateCategoryModalService
) { }

Код не проверял, только в голове прогнал, наверняка есть какие-нибудь ошибки, но главное что бы вы суть идеи поняли.

Comments

[sdgroup14]

ERROR TypeError: Cannot read property 'subscribe' of undefined

а потом при клике

ERROR TypeError: Cannot read property 'key' of undefined ----- BtnComponent

А какой ключ я должен передать в

и еще
this.key = this.CreateCategoryModalService.stateSetHotKeysModalisOpen.lenght + 1;

я так понимаю вы просто мне описали логику? это не правильное выражение? потому что this.CreateCategoryModalService.stateSetHotKeysModalisOpen это массив... Вы имели ввиду чтоб я в массив запушил key модалок, а потом по ихнему ключу вызывал? Т.е. в моем примере я блрал переменную boolean, а вы хотите чтоб я с массива ее просто забирал?

[sdgroup14]

Евгений Калибров, Я не совсем понимаю как key заходит в массив categoryModalisOpen[]

[Евгений Калибров]

Да, я просто хотел идею описать, в коде есть ошибки.

это не правильное выражение? потому что this.CreateCategoryModalService.stateSetHotKeysModalisOpen это массив

Но тут у массива берётся свойство lenght (которое отвечает за количество элементов в массиве и прибавляется 1, что бы привязать окно к следующему элементу массива.

[sdgroup14]

Я вас понял, идея замечательная :). только вот я не понял каким образом key присваевается окну... У меня не получается.... Но если по честному, то вы на вопрос ответили и я понял логику. Отмечу решенным, но если не сложно будет вам, помогите добить этот вопрос. Спасибо.

[Евгений Калибров]

в ModalComponent метод ngOnInit вызывается при инициализации каждого нового окна, в нём мы берём следующий по порядку key из сервиса.

[sdgroup14]

Евгений Калибров, Вообщем, спасибо, я немного изменил, потому что .change[this.key].subscribe(isOpen => { - он не понимал change[key].... Я сделал так, все работает

toggleStateSetHotKeysModal(key) {
this.stateSetHotKeysModalisOpen = !this.stateSetHotKeysModalisOpen;
this.modalArr[key] = this.stateSetHotKeysModalisOpen;
this.change.emit(this.modalArr);
}

а в компоненте

this.key = this.StateSetHotKeysModalService.modalArr.length + 1;
this.StateSetHotKeysModalService.change.subscribe(isOpen => {
this.stateSetKeyIsOpen = isOpen[this.key];
});

Еще раз спасибо огромное :)