создать маршрут для многомодульного углового приложения

Question

Я новичок в угловой.У меня есть многомодульная структура в угловом приложении, например, логин, пользователь, отчет и т. Д. Каждый модуль имеет один или два компонента.Я хочу реализовать маршрутизацию, но страница входа должна отображаться первой.когда пользователь находится в окне входа, навигация не должна отображаться.когда пользователь входит в систему, он перенаправляет на панель управления.на панели инструментов должна отображаться панель навигации, и когда пользователь нажимает на любое меню, которое компонент должен отображать под панелью навигации.

В настоящее время, когда я щелкаю по меню, оно перенаправляется на этот компонент и скрывает панель навигации.

//app.routing.module.ts
const routes: Routes = [
  { path: '', component: LoginComponent }, 
  { path: 'dashboard', component: DashboardComponent }, 
  { path: 'user', component: AddUserComponent }, 
  { path: 'trello', component: TrelloDataComponent }, 
  { path: 'calender', component: CalenderComponent }, 
  { path: 'clockify', component: ClockifyDataComponent }, 
  { path: 'rescueAll', component: AllDataComponent }, 
  { path: 'rescueDate', component: AllDataComponent }, 
  { path: '**', component: PageNotFoundComponent }
];

// app.module.ts

imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,

    CalModule,
    ClokifyModule,
    LoginModule,
    RescueModule,
    TrelloModule,
    UserModule,
    PagenotfoundModule
  ]

 //app.component.html
    <router-outlet></router-outlet> 

Answer 1

Как было указано в комментариях, извлеките navbar снаружи в app.component.html, чтобы оно было <router-outlet></router-outlet>

Тег розетки маршрутизатора будет заменен в соответствии сна ваш текущий URL, поэтому, если вы хотите, чтобы ваш navbar всегда был виден, вы либо

1. включаете его в каждый отдельный компонент - плохая идея, так как это дублирование кода и много ненужногорендеринг
2. извлечение его снаружи -> хорошая практика сделать это.

если вы все еще хотите скрыть это, например, на экране входа в систему, вы можете сделать это с помощью панели навигациикомпонент, с просмотром текущего активного URL-адреса, что-то вроде этого:

  constructor(private activatedRoute: ActivatedRoute) {
  }

  ngOnInit() {
    this.activatedRoute
      .params
      .subscribe(
        params => {
          console.log("current url parameters:", params);
        }
      );
  }

И в зависимости от текущего URL-адреса, вы можете скрыть или показать (например, с помощью *ngIf панель навигации.