首页 文章

如果手动编写URL，Angular将刷新应用程序

提问于
浏览 次
0

我正在使用Angular 6，我对路线的变化有疑问 . 如果我使用routerLink或navigate（）方法浏览应用程序，它可以正常工作，因为它只加载新模块（如果需要） . 但是例如，如果我在这个链接：localhost：8080 / home，我点击URL，取消'home'，写'profile'并按Enter键，它正确地进入配置文件页面，但应用程序重新加载（也是应用程序组件） . 为什么？我弄不清楚 . 这是我的路线：

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

也许这个问题出现在版权保护者身上？

@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：

@NgModule({
declarations: [
    ProfileComponent
],
imports: [
    CommonModule,
    FormsModule
]
 })
 export class ProfileModule { }
angular angular-routing angular-router canactivate

4 回答

  • 2

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

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

    我试图以一种非常简单的方式解释它，为了更全面的解释，请查看Angular docs

    回复于
  • 1

    当使用routerLink时，JavaScript会更改URL，即不会将其视为重新加载网页 .

    但是，当您在地址栏中按Enter键时，将重新加载页面，即，再次从提供index.html的服务器提供内容（如果您没有定义任何其他HTML来代替索引） ）因此应用程序重新初始化 .

    这就是重新加载所有组件的原因 .

    正如@Wesley所建议的，您可以参考角度文档以获取更多信息 .

    https://angular.io/guide/router

    您可以浏览下面提到的博客以进行部署 .

    https://arjunphp.com/deploy-angular-app-production-nginx/

    这里要注意的主要是 try_files $uri $uri/ /index.html =404; . 当地址栏上的输入被点击时，NGINX首先检查给定的URL是否映射到服务器上的某个文件/路由 . 如果它不存在，在我们的情况下 localhost:8080/profile ，则不存在，因为没有这样的物理路径 . 因此，NGINX将为 /index.html 文件提供服务，而该文件又将获取所有JS文件，这些文件将依次处理路由 .

    如果需要使用API，可以使用NGINX的反向代理机制将例如 /api/ 路径重定向到相应的服务器 .

    回复于
  • 1

    您可以使用

    RouterModule.forRoot(
  ROUTES,
  { useHash: true }
)],

    哈希将阻止应用程序重新加载 . 因此，当您在地址栏上按Enter键时，应用程序将只更改要显示的组件 .

    回复于
  • 0

    路由基本上用于延迟加载应用程序，一次一个模块 . 每条路线都取决于之前的路线，依此类推 . 因此，当您手动输入URL时，应用程序将重新加载路径中的所有组件 .

    回复于

相关问题