Question

我正在使用Angular 6，但更改路线时遇到问题。如果我使用routerLink或navigation（）方法浏览该应用程序，则它将正常工作，因为它仅加载新模块（如有必要）。但是例如，如果我在以下链接中：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 { }

也许问题出在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：

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

Answer 1

当您在Angular中浏览.ContentHeader hgroup h1 + h2 { padding-bottom: 10px; }时，底层的JavaScript正在确定向浏览器提供的内容。这意味着当通过Angular路由器更改URL地址时，它将获取更改并相应地提供组件。

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

我试图以一种非常简单的方式进行解释，有关更详尽的解释，请查看Angular docs

Answer 2

使用routerLink时，JavaScript会更改URL，即，它不被视为网页的重新加载。

但是，当您点击地址栏中的回车键时，页面会重新加载，即，再次从提供index.html的服务器提供内容（如果您没有定义要提供给其他HTML的内容）索引位置），因此应用程序将重新初始化。

这就是为什么要重新加载所有组件的原因。

如@Wesley所建议，您可以参考angular文档以获取更多信息。

https://angular.io/guide/router

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

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

这里要注意的主要是try_files $uri $uri/ /index.html =404;。当在地址栏上按下Enter键时，NGINX首先检查给定的URL是否映射到服务器上的某些文件/路由。如果它不存在，那么在我们的情况下localhost:8080/profile中就不存在，因为没有这样的物理路径。因此，NGINX将提供/index.html文件，而该文件反过来将获取所有JS文件，这些JS文件随后将处理路由。

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

Answer 3

您可以使用

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

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

Answer 4

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

Answer 5

我回答这个问题有点晚了，但也许这也会对某人有所帮助。

您可以创建一个 .htaccess 文件，将所有请求传输到您的 index.html 文件

.htaccess

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

如果URL是手动编写的，则Angular刷新应用程序

5 个答案: