Question

我有一个Angular 6应用程序。起初它只是一页（比方说“搜索页”），所以我将页面内容放在 app.component.html和相关功能等。因此，搜索页面位于appcomponent中。现在，我被要求添加另一个页面（登录页面）。因此，现在第一个需要打开的页面是该页面首先加载的是登录页面。如果登录成功，则应打开“搜索页面”。

我是Angular的新手，所以我看了一些路由和导航教程，并应用了他们在做什么。问题在于，现在第一次加载页面时，它将同时打开LoginComponent和AppComponent（搜索页面）。在页面登录屏幕顶部和该搜索屏幕下方。另外，如果我去“ /搜索”，这一次有两个搜索页面，一个在另一个页面之下。

所以我有一个额外的搜索页面。问题是该搜索页面位于appcomponent中。我猜应用程序默认情况下会加载此组件。我想要的是我要显示LoginComponent 首先（首次加载页面时），如果登录成功，请导航至搜索页面。

这是我添加路由的步骤：

我在我的 app.module.ts

import {RouterModule} from '@angular/router';

我也在这样的导入中添加了RouterModule（同样在 app.module.ts 中）

imports: [

    RouterModule.forRoot([
      {path: '', component: LoginComponent},
      {path: 'search', component:AppComponent}

    ])
],

在 app.component.html 中添加了<router-outlet></router-outlet>。此HTML文件包含我的搜索页内容，如导航栏，表格等。在它的开头，我放置了路由器行（我知道将其放置在搜索页中是错误的，但是在我观看的教程中，他放置了<router-outlet></router-outlet>在app.component.html中。我想我的双页面的原因是此HTML文件，但无法使其在其他地方工作。）
在 login.component.html 中，登录页面内容，当然还有带有（click）=“ onLogin（）”

this.router.navigate(['/search']);

login.component.ts 包含onLogin函数。
最后在我的index.html中，我在主体<app-root></app-root>

现在可以使用登录导航，但是正如我所说的URL初始页面：“ http://localhost:4200/” 包括登录页面和搜索页面。另外URL：“ http://localhost:4200/search”包括两个搜索页面。

Answer 1

您的方法是正确的，只需从app.component html中删除搜索组件，然后仅具有登录组件。

登录成功后，您可以将路由机制与authguard结合使用来导航到搜索页面

Answer 2

您可以尝试重定向。

参考官方文档：angular router

imports: [
BrowserModule,
RouterModule.forRoot([
{path: '', redirectTo: '/component-name', pathMatch: 'full'},
]),
],

Answer 3

只需为search创建一个新组件并将其从app组件中删除，然后将路由模块更改为

RouterModule.forRoot([
  {path: '', component: LoginComponent},
  {path: 'search', component: SearchComponent}

])

并确保在app.component.html中只有<router-outlet></router-outlet>存在

如何将默认打开页面更改为AppComponent以外的组件？

3 个答案: