0

我目前正在将 @ngrx 状态管理包合并到一个已经存在的 Angular2 应用程序中。到目前为止，一切都顺利进行，但我遇到了一个问题，即当返回到前一个组件并通过应用商店维护状态时，[ngClass] 指令无法正常工作。

我试图实现的功能是当用户单击一个类别时，该链接使用组件类上的一个名为“selectedCategory”的属性获得一个 css 类“活动”，该属性在@ngrx 商店中更新。当用户单击单个产品时，它会将它们带到单独的产品组件中。然后，当用户返回到原始组件时，链接应该再次被赋予类“活动”，因为“selectedCategory”存储在@ngrx 存储中。但这不起作用，似乎我的 [ngClass] 指令没有按应有的方式工作。

这是我的代码（请注意，这一切都在我们说话时被重构，所以忽略任何你可能认为看起来很奇怪的东西）。

类别树组件

@Component({
    selector: 'category-tree',
    templateUrl: './app/views/directives/category-tree-view.html'
})

export class CategoryTree {
    @Input() categories: Category[];
    @Output() categoryChange:EventEmitter<any>;
    contentLoaded = false;
    selectedCategory: Category;
    categoriesLower = [];
    APIError = [];

    constructor(
        private _categoryService: CategoryService,
        private _store: Store<ProductViewerStore>
    ) {
        this.categoryChange = new EventEmitter();

        _store.select('selectedCategory')
            .subscribe((selectedCategory) => {
                this.selectedCategory = selectedCategory;
            });
    }

    categoryClick(category) {
        this._store.dispatch({ type: 'MAKE_CATEGORY_SELECTED', payload: category });
        this.getCategoriesLower(category);
    }

它的观点：

<li *ngFor="let category of categories" class='desktop-menu'>
    <span (click)="categoryClick(category)" [ngClass]="{'selected' : category === selectedCategory}">{{category.name}}</span>
    <ul *ngIf="category.sub_categories"  class='sub-category'>
        <category-tree [categories]="category.sub_categories"></category-tree>
    </ul>
</li>

和 selectedCategory @ngrx 减速器：

import {Category} from "../../classes/Category";

export const selectedCategory = (state: Category, action) => {
    switch(action.type) {
        case 'MAKE_CATEGORY_SELECTED':
            return action.payload;
        case 'RESET_SELECTED_CATEGORY':
            return {};
        default:
            return state;
    }
};

正如您在我的组件代码中看到的那样， selectedCategory 组件正在被存储并在订阅中正确返回。当这个 Observable 返回并解决时，我的视图模板 ngClass 似乎没有运行。任何人都可以在这里看到问题吗？

谢谢

4

1 回答 1

0

如果selectedCatagory是一个Object，也许你的===，它做参考检查，没有正确解决？看起来不错，但在这方面，ngrx 可能正在发生一些事情？

于 2017-05-12T21:23:36.673 回答