如果 URL 是手动编写的，Angular 会刷新应用程序 [英] Angular refresh the application if the URL is written manually

问题描述

我使用的是 Angular 6，但在更改路线时遇到问题.如果我使用 routerLink 或 navigate() 方法浏览应用程序，它会正常工作，因为它只加载新模块(如有必要).但是，例如，如果我在此链接中:localhost:8080/home，我单击 URL，取消主页"，输入配置文件"并按 Enter，它正确进入配置文件页面，但应用程序已重新加载(也是应用程序组件).为什么?我想不通.这是我的路线:

I'm using Angular 6 and I have an issue with the change of routes. If I navigate through the application using the routerLink or the navigate() method, it works correctly, because it only load the new module (if necessary). But for example if I am in this link: localhost:8080/home, I click on the URL, cancel the 'home', write 'profile' and press Enter, it correctly goes on profile page but the application in reloaded (also the app component). Why? I can't figure out. This is my routing:

const appRoutes: Routes = [
  { path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
  { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard] },
  { path: 'login', component: LoginComponent },
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

也许问题出在 auth-guard 上?

Maybe the issue is on the auth-guard?

@Injectable()
export class AuthGuard implements CanActivate {

constructor(private store: Store<fromApp.AppState>, private route: ActivatedRoute, private router: Router) {
}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.store.select('auth')
        .pipe(take(1),
            map((authState: fromAuth.State) => {
                if (authState.authenticated) {
                    return true;
                } else {
                    let sessionStorageToken: string = sessionStorage.getItem('token');
                    if (sessionStorageToken) {
                        this.store.dispatch(new AuthActions.Login());
                        this.store.dispatch(new AuthActions.SetToken(sessionStorageToken));
                        return true;
                    } else {
                        let url = state.url;
                        this.router.navigate(['/login', { redirectTo: url }]);
                        return false;
                    }
                }
            }));
}
}

这是 profile.module.ts:

This is profile.module.ts:

@NgModule({
declarations: [
    ProfileComponent
],
imports: [
    CommonModule,
    FormsModule
]
 })
 export class ProfileModule { }

推荐答案

当您在 Angular 中浏览 routerLink 时，底层 JavaScript 正在确定向浏览器提供什么.这意味着当 URL 地址通过 Angular 路由器更改时，它会获取更改并相应地为组件提供服务.

When you're navigating through the routerLink within Angular, the underlying JavaScript is determining what to serve to the browser. Meaning that when the URL address is changed via the Angular router, it picks up the change and serves the components accordingly.

当您手动更新 URL 并按 Enter 键时，就像进入一个新网页一样.这意味着服务器将需要重新提供基础网站 http://localhost:1234，然后应用程序将处理那里的路由，/profile 和提供所需的组件.

When you update the URL manually and press enter, it is like going to a new web page. Meaning that the server will need to re-serve the base website, http://localhost:1234, and then the application will handle the route there after, /profile and serve the required component.

我试图以一种非常简单的方式解释它，如需更详尽的解释，请查看 Angular 文档

I've tried to explain it in a very simplistic way, for a more thorough explanation please check out the Angular docs

这篇关于如果 URL 是手动编写的，Angular 会刷新应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！