angular 8：为什么组件没有加载？

Question

所以我用angular-cli. 我在src目录中有以下结构。

. ??? app ?   ??? app-routing.module.ts ?   ??? app.component.css ?   ??? app.component.html ?   ??? app.component.spec.ts ?   ??? app.component.ts ?   ??? app.module.ts ?   ??? notifications ?   ??? notifications.component.css ?   ??? notifications.component.html ?   ??? notifications.component.spec.ts ?   ??? notifications.component.ts ??? assets ??? environments ?   ??? environment.prod.ts ?   ??? environment.ts ??? favicon.ico ??? index.html ??? main.ts ??? polyfills.ts ??? protocol.js ??? styles.css ??? test.ts

路线有以下。

RouterModule.forRoot([
        { path: '', component: AppComponent },
        { path: 'notifications', component: NotificationsComponent}
    ])

AppComponent 具有用于登录页面的 Html。
提交表单后，我重定向到notifications组件[routerLink]="['/notifications']"

现在我希望<app_root></app_root>在 index.html 中填充notifications-component.html.

首先，上面的假设对吗？

我试图改变在选择notification-component.ts
我试图把<app-notifications></app-notifications>在<app_root></app_root>
我试图把<router-outlet></router-outlet>在<app_root>，app.component.html和notifications.component.html。（仅app.component.html有效。但它同时显示了两个 HTML。）

如果上述假设不正确，它应该如何工作？

聚苯乙烯

谢谢大家的及时回复。

我知道你所有的答案都是对的，但我只能接受一个答案。

Answer 1

您的方法需要进行一些更改：

1. 添加<router-outlet></router-outlet>到app.component.html文件中。

2. 创建另一个用于登录的组件（例如LoginComponent）

3. 更新路线

      RouterModule.forRoot([
       { path: '', pathMatch: 'full', component: LoginComponent },
       { path: 'notifications', component: NotificationsComponent }
      ])],
   

*另外不建议使用home路径登录，如果未通过身份验证，您可以将url更改为/login并重新路由。

看看https://stackblitz.com/edit/angular-dfhxek。