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']"组件

现在，我希望index.html中的<app_root></app_root>填充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。）

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

P.S。

谢谢，每个人都希望及时做出反应。

我知道您所有的答案都是正确的，但我只能接受一个答案。

Answer 1

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

将<router-outlet></router-outlet>添加到app.component.html
创建另一个用于登录的组件（例如LoginComoonent）
更新路线
```
  RouterModule.forRoot([
   { path: '', pathMatch: 'full', component: LoginComponent },
   { path: 'notifications', component: NotificationsComponent }
  ])],
```
*此外，也不建议使用主路径登录，如果未通过身份验证，则可以更改为/ login的url并重新路由。

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

Answer 2

AppComponent应该是您应用程序的根组件，其中应包含<router-outlet></router-outlet>（可能很少或仅此）。没有通往那里的路线，这是始终将被渲染的一个组件。

创建一个单独的组件来处理登录（例如LoginComponent），并具有以下路由：

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

Answer 3

一种更好的方式来做自己想要的事

创建用于登录的新组件
在app.component.html中放置<router-outlet></router-outlet>
以这种方式更改您的路由模块：

RouterModule.forRoot（[ {path：”，component：LoginComponent}， {路径：“ notifications”，组件：NotificationsComponent} ]）

Answer 4

您的RouterModule.forRoot不能拥有AppComponent。该组件在main.ts中引导。

您说您在AppComponent内添加了登录html。这是不正确的，您应该将其移动到单独的组件LoginComponent中。完成此操作后，您可以更新app.component.html：

<router-outlet></router-outlet>

您显然可以在此处添加总是可见的额外内容，例如导航或页脚。

然后您应该将路线更新为此：

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

Answer 5

就我而言，区分大小写是问题所在。像我这样的新用户可能会犯的一个错误是路径名区分大小写。

角8：为什么不加载组件？

5 个答案: