Как мне запустить экземпляр моего ng-класса с помощью моего getter / setter? - PullRequest
Новая
       8

Как мне запустить экземпляр моего ng-класса с помощью моего getter / setter?

0 голосов
/ 02 октября 2018

У меня есть меню, и когда я нажимаю на элемент меню, класс «is-active» применяется через ng-class.Класс применяет другой цвет к элементу меню, чтобы прояснить, выбран ли элемент меню.Каждый пункт меню генерирует разный контент.Когда вы щелкаете по этому контенту, маршрут изменяется, и класс is-active теряется, потому что компонент уничтожается.

Я использую метод получения / установки, чтобы попытаться сохранить активное состояние в моем сервисе, но я не знаю, как убедиться, что оно работает только с соответствующим пунктом меню.Я использую объект и перебираю каждый элемент, поэтому, когда я пытаюсь установить класс ng на метод получения / установки, все элементы меню получают класс, а не только тот, который я щелкнул.Как я могу изменить свой код так, чтобы метод получения / установки был установлен только на тот элемент меню, на который я нажал? 

// template
<header class="tabs__header">
    <div
        class="tab"
        *ngFor="let e of entities"
        [ngClass]="{'is-active': e.active || showImage }" 
        (click)="setActive(e)">
        <button>
            <h3>{{e.name}}</h3>
        </button>
    </div>
</header>

// component
entities = [
    {'name': "Doctors"},
    {'name': "Hospitals"},
    {'name': "Pharmacies"}
];

get showImage(): boolean {
    return this.entityService.showImage;
}

set showImage(value: boolean) {
    this.entityService.showImage = value
}

setActive(e) {
    this.entities.forEach(function(e) {
        if(e['active'] === true) {
            e['active'] = false
        }
    });
    e.active = true
    this.showImage = !this.showImage;
}

// service

showImage: boolean;

1 Ответ

0 голосов
/ 02 октября 2018

Что ж, ваш showImage является свойством вашего компонента, поэтому установка его на true означает, что выражение e.active || showImage равно всегда true для каждого повторяющегося элемента, независимо от того, что e.activeприравнивается к.showImage не распространяется на каждую повторяющуюся сущность;это одно свойство, связанное со всеми ними.

Ваш геттер и сеттер здесь по сути ничего не делают;вы получите тот же результат, связав ngClass с "{'is-active': e.active || entityService.showImage }"

Кроме того, у вас есть параметр e в вашей функции setActive, затененный в вашем выражении forEach.Это может все испортить.

В конце концов, вы не указали, чего пытаетесь достичь, поэтому у меня нет ответа, чтобы вас туда доставить, но вы упомянули как-то получить showImage ограничено для каждой сущности.

Если я сделаю большое жирное предположение и предположу, что вы пытаетесь показать изображение, когда объект неактивен, и что-то еще, когда он активен, это можно сделать немного по-другому: 

// template
<header class="tabs__header">
    <div
        class="tab"
        *ngFor="let e of entities"
        [class.is-active]="e.active" 
        (click)="setActive(e)">

        <button>
            <img src="someSrc" *ngIf="!e.active" />
            <h3 *ngIf="e.active">{{e.name}}</h3>
        </button>
    </div>
</header>


// component
setActive(e) {
    this.entities.forEach(s => s.active = false);
    e.active = true

    // this would essentially toggle showImage on each click. 
    // is this intended?
    // this.entityService.showImage = !this.entityService.showImage;
}

Это будет в основном переключаться между изображением и элементом is-active / h3 при каждом нажатии.

Если вы хотите отслеживать свойство showImage для каждого Entity, вам нужно добавить этосвойство типа Entity и управлять им таким образом.Если это так, то было бы неплохо обернуть эти повторяющиеся Entities в их собственные компоненты с предполагаемым поведением, ограниченным им.

Если бы я был совершенно неправ здесь, предполагая, что вы пытаетесьделать, извини.Просто дай мне знать.

...