Question

在模板组件AppComponent中，根据值，变量this.loggedInService.isLoggedIn在logIn()和logout()方法之间切换，这在应用程序组件{{1}中}在服务AppComponent中订阅了这些方法，并根据方法将变量的值更改为true或false。

同样在Guard的方法LoggedinService中，我根据变量checkLogin (url: string)的值返回true或false

一切正常，但是当我重置页面时，我需要保留输入或输出按钮的值。如何实施？

AppComponent模板：

this.loggedInService.isLoggedIn

AppComponent代码：

            <li class="nav-item">
                <a class="btn btn-outline-success"
                   [class.btn-outline-success]="!this.loggedInService.isLoggedIn"
                   [class.btn-outline-danger]="this.loggedInService.isLoggedIn"
                   (click)="this.loggedInService.isLoggedIn ? logout() : logIn()">
                    {{this.loggedInService.isLoggedIn ? 'Exit' : 'Enter'}}
                </a>
            </li>

LoggedinService：

export class AppComponent implements OnInit {
    constructor(private loggedInService: LoggedinService,
                private router: Router) {}

    ngOnInit() {}

    logIn(): void {
        this.loggedInService.login().subscribe(() => {
            if (this.loggedInService.isLoggedIn) {
                let redirect = this.loggedInService.redirectUrl ? this.loggedInService.redirectUrl :
                    '/gallery';
                this.router.navigate([redirect]);
            }
        });
    }

    logout(): void {
        this.loggedInService.logout();
        this.router.navigate(['/']);
    }
}

AuthGuard ：

export class LoggedinService implements OnInit{
    isLoggedIn: boolean = false;
    redirectUrl: string;
    
    constructor() {}

    ngOnInit() {}

    login(): Observable<boolean> {
        return of(true).pipe(
            delay(100),
            tap(val => this.isLoggedIn = true)
        );
    }

    logout(): boolean {
        return this.isLoggedIn = false;
    }
}

AppRoutingModule

export class AuthGuard implements CanActivate {
    constructor(private loggedInService: LoggedinService) {
    }

    canActivate(next: ActivatedRouteSnapshot,
                state: RouterStateSnapshot):  boolean{
        let url: string = state.url;
        return this.checkLogin(url);
    }

    checkLogin(url: string): boolean {
        if (this.loggedInService.isLoggedIn) {
            return true;
        } else {
            this.loggedInService.redirectUrl = url;
            return false;
        }
    }
}

GalleryRoutingModule

const appRoutes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'app-root'
  }
];

Answer 1

您可以将值保存在localStorage中，还可以创建一个服务来处理集合并从localStorage中获取值（推荐）

示例

localStorage.setItem('login',state);
localStorage.getItem('login'); // string value

Answer 2

使用localStorage保留输入/输出的值

(('John', 'Jenny'), ('Charles', 'Christy'), ('Mike', 'Monica'))
()

并在您的ngOnit函数中从locaLStorage检查getItem（）来检查条件并相应地保留值。

Answer 3

自从重新加载页面以来，应用程序的状态将重置。您可以做的是使用localStorage保留按钮的值，并在页面加载时从那里读取按钮的值。如果有值，请使用默认值。

重新加载页面后如何保存按钮的值？

3 个答案: