Angular：如何分别显示另一个组件答案

【问题标题】：Angular: how separately show another componentAngular：如何分别显示另一个组件
【发布时间】：2021-07-21 17:36:40
【问题描述】：

我可能有非常基本的问题，但找不到解决方案。我正在 Angular 中构建小应用程序。我有第一个组件是登录屏幕。成功登录后，我想向用户显示一个包含一些数据的表格。

我创建了另一个包含这些数据的组件“表”。在我在登录和显示数据之间建立联系之前，我只想处理表格的样式。而且...我不知道如何只进入这个视图。

我的意思是，当我运行 http://localhost:4200/ 时 - 我看到了我的登录屏幕。但是当我尝试访问 http://localhost:4200/table 时，我仍然...查看登录屏幕。

我在 app.module.ts 中添加了路由：

    const appRoutes: Routes = [
  { path: 'table', component: TableComponent },
];

和

RouterModule.forRoot([
  {path: 'table', component: TableComponent},
]),

我知道，我需要稍后从登录屏幕重定向到此，但此时我不知道如何访问此组件视图。有人可以建议我并解释一下，因为我确定我在这里没有看到和理解一些东西。

【问题讨论】：

请分享您的完整路由配置：登录在哪里定义？可能有守卫吗？
目前它只是视图，我首先处理样式。 pastebin.com/aTueLFUc

标签： angular

【解决方案1】：

首先，正如@pertrai1 建议的那样，包含

<router-outlet></router-outlet>

上述代码应存在于 app.component.html 文件中。

接下来，我希望为 Login 和 Table 创建单独的组件。因此，当您最终从登录页面对用户进行身份验证时，您将能够将它们重定向到表格页面。下面是一个示例路由配置：

 const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'table', component: TableComponent },
  { path: 'notfound', component: NotFoundComponent },
  { path: '**', redirectTo: '/notfound' },
];

为了解释上述内容（假设您在本地运行），

'' 将指向 localhost:4200 并且默认情况下您将看到 LoginComponent
'table' 将指向 TableComponent
如果您到达死胡同页面，'**' 是可选的，您可以显示 404 或 NotFoundComponent

【讨论】：

太棒了 - 感谢您的解释。我明白了，我想念什么 - 我同时在 app.component 中放入了两件事！

【解决方案2】：

您是否将<router-outlet></router-outlet> 放置在您的应用中的某个地方？

【讨论】：

在 index.html 中是，就在下方。我开始想，也许如果我从 index.html 中删除 app-root，并为登录创建新组件，并且 AppComponent 结束时没有任何内容，它会起作用....？
这是个问题，因为没有 /table 路由我会看到我的登录屏幕，但是当我添加路由时，我会看到下面的登录屏幕和表格内容。