Question

我目前正在将@ngrx状态管理包整合到已经存在的Angular2应用程序中。到目前为止，一切都在游泳，但我遇到的问题是，[ngClass]指令在返回上一个组件并通过app store维护状态时无法正常工作。

我尝试实现的功能是当用户点击某个类别时，该链接会被赋予css类＆＃39; active＆＃39;在名为＆＃39; selectedCategory＆＃39;的组件类上使用属性在@ngrx商店中更新。当用户点击单个产品时，它会将其转移到单独的产品组件中。然后，当用户返回到原始组件时，该链接应该被赋予类“活动”的权限。再次作为'selectedCategory＆＃39;存储在@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 reducer：

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组件正在存储并在订阅中正确返回..看起来好像我的视图模板ngClass在此Observable返回并解析时未运行。谁能在这里看到问题？

由于

Answer 1

如果selectedCatagory是Object，那么进行参考检查的===可能无法正确解析？ 看起来没问题，但在这方面ngrx可能会发生什么事情？

组件视图ngClass不更新

1 个答案: