Question

我希望一个组件在使用路由路径更改进行导航时将local storage和navigate移至另一个组件。

从X导航到Y后，请找到stack blitz，然后返回X，它应该删除本地存储。但是相反。

https://stackblitz.com/edit/angular-hxmstz

以下是我要实现的目标，

我有一个页面要在local storage中存储一个值。如果刷新页面，则应该从本地存储中获取值。如果导航到另一个页面，则应清除本地存储。由于“某些原因”，我也使用相同的键将值存储在另一个组件的本地存储中。

我清除了ngDestroy中的本地存储，但是如果我通过更改url导航到另一条路由，则ngdestory不会调用（因为两者都在同一路由器出口中），所以我的本地存储是不删除。

如果我在@HostListener('window:beforeunload')上方使用ngDestory，则在刷新页面时，还将执行ngDestroy并删除本地存储。我不想要的。

1 /第X页->存储本地存储->刷新->从本地获取   存储并显示

2 /网站的网址路由从x更改为y->需要删除本地   存储并转到Y。

如果我在Y的ngOnInit中删除本地存储，则Y也具有相同的功能，因此，如果在Y上发生刷新，则Y将丢失其本地存储值。

Answer 1

您可以使用angular的界面CanActivate

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';

@Injectable({
    providedIn: 'root'
})
export class AuthGuard implements CanActivate {

    constructor(private router: Router) { }

    canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
            if (next && next.routeConfig && next.routeConfig.path ) {
            //your logic here
            localStorage.removeItem('myItem');//to clear specific Item
            localStorage.clear();//to entirely clear local storage
            }
    }
}

您需要做的就是在角度项目中创建一项服务，并参考上述CanActivate.的实现

Answer 2

如果我对您的理解正确，则可以这样解决：

app.component.html

<hello name="{{ name }}"></hello>
<button [routerLink]="['/x-dashboard']">X Dashboard</button>
<button [routerLink]="['/y-dashboard']">Y Dashboard</button>
<router-outlet #outlet="outlet" (activate)="onActivate($event)"></router-outlet>

app.component.ts

constructor(private route: ActivatedRoute) {}

onActivate(event) {
    if(localStorage.getItem('lastPage') !== this.route.firstChild.snapshot.routeConfig.path){
        console.log('clearStorage');
        localStorage.clear;
    }
    localStorage.setItem('lastPage', this.route.firstChild.snapshot.routeConfig.path);
  }

从当前路线导航到另一条路线时，清除本地存储数据

2 个答案: