在模板组件AppComponent中,根据值,变量this.loggedInService.isLoggedInlogIn()logout()方法之间切换,在应用程序组件AppComponent中,它们在服务LoggedinService和服务中订阅了这些方法。根据方法,将变量的值更改为true或false。

同样在Guard的方法checkLogin (url: string)中,我根据变量this.loggedInService.isLoggedIn的值返回true或false

一切正常,但是当我重置页面时,我需要保留输入或输出按钮的值。如何执行呢?

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>





AppComponent的代码:



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(['/']);
    }
}





LoggedinService:



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





AuthGuard:



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





AppRoutingModule



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





GalleryRoutingModule



const galleryRoutes: Routes = [
    {
        path: 'gallery',
        component: GalleryMainComponent,
        canActivate: [AuthGuard],
        children: [
            {path: '', component: GalleryComponent,},
            {path: 'add', component: GalleryAddComponent},
            {path: ':id', component: GalleryItemComponent},
        ]
    },
];

最佳答案

您可以将值保存在localStorage中,也可以创建一个服务来处理集合并从localStorage获取值(推荐)



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

关于javascript - 重新加载页面后如何保存按钮的值?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/52832322/

10-11 14:03
查看更多