Question

我有一个角度应用程序，并且正在设置ngrx。

在我的组件之一中，我注册了一个值的更改（无论是否通过身份验证）：

ngOnInit() {
    this.isAuth$ = this.store.select(fromRoot.getIsAuthenticated);
    this.isAuth$.subscribe((v) => console.log('new auth ', v));
}

加载页面时，我得到新的auth false（如预期的那样）。

奇怪的是，此组件的视图包含两个元素，一个为true时显示，另一个为false时：

<div>
    <div class="layout-profile" [ngClass]="{'layout-profile-active':active}" *ngIf="(isAuth$ | async)">
        <a href="#" (click)="onClick($event)" class="layout-profile-button">
            <img src="assets/layout/images/avatar.png" alt="babylon-layout" />
            <div class="layout-profile-userinfo">
                <span class="layout-profile-name">Arlene Welch</span>
                <span class="layout-profile-role">Design Ops</span>
            </div>
            <i class="layout-profile-icon pi pi-angle-down"></i>
        </a>
        <ul class="layout-profile-menu" [@menu]="active ? 'visible' : 'hidden'">
            <li role="menuitem">
                <a [routerLink]="['/user/profile']" [attr.tabindex]="!active ? '-1' : null">
                    <i class="pi pi-user"></i>
                    <span>Profile</span>
                </a>
            </li>
            <li role="menuitem">
                <a href="#" [attr.tabindex]="!active ? '-1' : null" (click)="logout($event)">
                    <i class="pi pi-sign-out"></i>
                    <span>Déconnexion</span>

                </a>
            </li>
        </ul>
    </div>

    <div class="layout-profile" [ngClass]="{'layout-profile-active':active}" *ngIf="!(isAuth$ | async)">
        <ul class="layout-profile-menu" [@menu]="active ? 'visible' : 'hidden'">
            <li role="menuitem">
                <a [routerLink]="['/auth/login']" [attr.tabindex]="!active ? '-1' : null">
                    <i class="pi pi-user"></i>
                    <span>Connexion</span>
                </a>
            </li>
        </ul>
    </div>
</div>

当我刷新页面时，并且只有在刷新页面时，我都看不到它们。加载页面后，如果我执行一些注销/登录操作，则会显示组件的正确部分。

知道发生了什么吗？

编辑如果有帮助，这是我的App.reducer.ts：

import { ActionReducerMap, createFeatureSelector, createSelector } from '@ngrx/store';
import * as fromAuth from './auth/auth.reducer';

export interface State {
    auth: fromAuth.State;
}

export const reducers: ActionReducerMap<State> = {
    auth: fromAuth.authReducer
};
export const getAuthState = createFeatureSelector<fromAuth.State>('auth');
export const getIsAuthenticated = createSelector(getAuthState, fromAuth.getIsAuthenticated);

还有我的应用程序的简化程序

import { AuthActions, AuthActionTypes } from "./auth.actions";
import { User } from "firebase";

export interface State {
    isAuthenticated: boolean;
    user: User;
};

const initialState: State = {
    isAuthenticated: false,
    user: null
};

export function authReducer(state = initialState, action: AuthActions): State {
    switch (action.type) {
        case AuthActionTypes.SET_AUTHENTICATED: {
            return {
                isAuthenticated: true,
                user: action.user
            };
        }
        case AuthActionTypes.SET_UNAUTHENTICATED: {
            return {
                isAuthenticated: false,
                user: null
            };
        }

        default: {
            return state;
        }
    }
}
export const getIsAuthenticated = (state: State) => state.isAuthenticated;

为什么我的初始ngrx状态不能与ngIf一起使用

0 个答案: