Question

我有一个菜单，当我单击菜单项时，将通过ng-class应用“ is-active”类。该类将不同的颜色应用于菜单项，以使菜单项被清除。每个菜单项生成不同的内容。当您单击该内容时，路由会更改，并且is-active类会丢失，因为该组件已损坏。

我正在使用getter / setter尝试将活动状态存储在我的服务中，但是我不知道如何确保它仅与适当的菜单项一起使用。我正在使用一个对象并遍历每个项目，因此当我尝试将ng-class设置为getter / setter时，所有菜单项都会获得该类，而不仅仅是我单击的那个。如何更改我的代码，以便将getter / setter设置为仅单击的菜单项？

// 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;

Answer 1

好吧，您的showImage是组件的属性，因此将其设置为true意味着对于每个重复项，表达式e.active || showImage总是 true ，无论e.active等于什么。 showImage的范围不限于每个重复的实体；这是绑定到所有属性的单个属性。

您的getter和setter基本上什么也不做；通过将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包装在自己的组件中，并以预期的行为为范围，将是一个很好的情况。

如果我在假设您要执行的操作时完全错了，对不起。请让我知道。

如何使用我的getter / setter触发ng类的实例？

1 个答案: