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

Question

我有一个 Angular 6 应用程序。起初它只是一个页面(比如说“搜索页面”)，所以我将页面内容放入
app.component.html 和相关函数等到app.component.ts。所以搜索页面在appcomponent中。
现在我被要求添加另一个页面(登录页面)。所以，现在需要打开的第一页是什么时候
第一次加载的页面是登录页面。如果登录成功，则应打开“搜索页面”。

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

所以我有一个额外的搜索页面。我知道问题是搜索页面在 appcomponent 中。
我猜该应用程序默认加载此组件。我想要的是我想显示 LoginComponent
首先(第一次加载页面时)，如果登录成功，导航到搜索页面。

这是我为添加路由所做的工作:

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

我还在这样的导入中添加了 RouterModule(再次在 app.module.ts 中)

imports: [

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

    ])
],

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

在 login.component.html ,
登录页面内容，当然还有一个带有 (click)="onLogin()"

的登录按钮

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

最后在我的 index.html 中，我将 appcomponent 称为 body <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>存在