угловой 8: почему компонент не загружается?

Question

Итак, я создал приложение с angular-cli.У меня есть следующая структура в src dir.

. ├── 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 для страницы входа в систему.
OnceФорма отправлена. Я перенаправляю на 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-кода.)

Если приведенные выше предположения неверны, как это должно работать?

PS

СПАСИБО, ВСЕМ за СРОЧНЫЙ ОТВЕТ.

Я знаю, что все ваши ответы верны, но я мог принять только один ответ.

Answer 1

Требуется пара изменений в вашем подходе

1. Добавить <router-outlet></router-outlet> в app.component.html
2. Создать еще один компонент для входа в систему (например, LoginComoonent)

3. Обновить маршрут

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

   * Также не рекомендуется использовать домашний путь для входа в систему, вы можете изменить его на URL / login и перенаправить, если он не аутентифицирован.

   Посмотрите https://stackblitz.com/edit/angular-dfhxek

Answer 2

Лучший способ сделать то, что вы хотите, будет выглядеть следующим образом

1. Создать новый компонент для входа в систему
2. В app.component.html поместить <router-outlet></router-outlet>

3. Измените свой модуль маршрутизации следующим образом:

   RouterModule.forRoot ([{путь: '', компонент: LoginComponent}, {путь: 'уведомления', компонент: NotificationsComponent}]))

Answer 3

Ваш RouterModule.forRoot не может иметь AppComponent.Этот компонент загружается в main.ts.

. Вы говорите, что добавили html логин в свой AppComponent.Это не правильно, вы должны переместить это в отдельный компонент, LoginComponent.Как только вы это сделаете, вы можете обновить app.component.html:

<router-outlet></router-outlet>

Здесь вы можете добавить дополнительные материалы, которые всегда будут видны, например, навигацию или нижний колонтитул.

Вам следуетзатем обновите ваши маршруты так:

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

Answer 4

AppComponent должен быть корневым компонентом вашего приложения, с <router-outlet></router-outlet> внутри (и, возможно, немного или ничего больше).У вас нет маршрута, ведущего туда, это единственный компонент, который будет отображаться всегда.

Создайте отдельный компонент, обрабатывающий логин (например, LoginComponent), и используйте такие маршруты, как:

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