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

Question

我有一个 Angular 6 应用程序。一开始只是一个页面（比如说“搜索页面”），所以我把app.component.html中的页面内容以及相关功能等放到了app.component.ts中。所以搜索页面是在appComponent中。现在我被要求添加另一个页面（登录页面）。所以，现在页面第一次加载时需要打开的第一个页面是登录页面。如果登录成功，则应打开“搜索页面”。

我是 Angular 的新手，所以我查看了一些路由和导航教程并应用了他们正在做的事情。问题是，现在当页面首次加载时，它会同时打开 LoginComponent 和 AppComponent（搜索页面）。位于页面登录屏幕顶部和搜索屏幕下方。另外，如果我转到“/search”，那么这次会有两个搜索页面，一个在另一个页面下。

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

这是我为添加路由所做的操作：

1. 我添加import {RouterModule} from '@angular/router';到我的app.module.ts

2. 我还在这样的导入中添加了 RouterModule （再次在app.module.ts中）

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

3. 添加到app.component.html<router-outlet></router-outlet>中。这个HTML文件包含我的搜索页面内容，如导航栏、表格等。在它的开头，我放置了路由器行（我知道放在我的搜索页面中是错误的，但在我观看的教程中，他放置了app.component。我猜想我的双页的原因是这个 HTML 文件，但无法让它在其他地方工作。）<router-outlet></router-outlet>

4. 在login.component.html中，登录页面内容，当然还有带有 (click)="onLogin()" 的登录按钮

5. 如果登录成功，login.component.ts包含 onLogin 函数this.router.navigate(['/search']);

6. 最后在我的 index.html 中我调用了 body 内的 appcomponent<app-root></app-root>

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

Answer 1

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

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

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

Answer 2

您的方法是正确的，只需从 app.component html 中删除搜索组件，只保留登录组件。

登录成功后，您可以使用带有 authguard 的路由机制导航到搜索页面