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

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

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

//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>


javascript angular jquery angular-routing angular-module
person lakhan    schedule 29.01.2019    source источник
comment
пройдите по ссылке angular.io/guide/feature-modules и также посмотрите ленивую загрузку   -  person Abhishek    schedule 29.01.2019
comment
Где определен ваш шаблон панели навигации? Если вы визуализируете компоненты меню в маршрутизаторе-выходе html-файла, который не имеет шаблона панели навигации, он не будет отображаться при переходе к этому компоненту.   -  person Code_maniac    schedule 29.01.2019
comment
‹a class=link mar-l-r-1 routerLinkActive=active [routerLink]=['/rescueAll']›Все данные‹/a› ‹a class=link mar-l-r-1 routerLinkActive=active [routerLink]=['/ user']›Добавить пользователя‹/a› ‹a class=link mar-l-r-1 routerLinkActive=active [routerLink]=['/clockify']›Clokify Data‹/a› ‹a class=link mar-l-r-1 routerLinkActive=active [routerLink]=['/trello']›Trello Data‹/a› ‹a class=link mar-l-r-1 routerLinkActive=active [routerLink]=['/calender']›Calender‹/a› это это шаблон панели навигации   -  person lakhan    schedule 29.01.2019

Ответы (1)


arrow_upward
0
arrow_downward

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

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

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

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

  constructor(private activatedRoute: ActivatedRoute) {
  }

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

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

person ForestG    schedule 29.01.2019