Как показать компоненты в области содержимого домашнего компонента вместо отдельной страницы в Angular 5

Question

Я новичок в Angular 5. Здесь я сталкиваюсь с проблемой маршрутизации компонентов.

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

Здесь домашний компонент имеет панель инструментов и боковое меню.bar, если пользователь выбрал любое из боковых меню, я хочу показать соответствующие (компонентные) данные в области содержимого домашнего компонента.

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

Проблема возникает, когда пользователь выбирает любое меню из боковой строки меню, соответствующий компонент не отображается в области содержимого компонента Home, он открываетсяв качестве отдельного компонента и занимает полный экран.

home.component.ts

 <mat-sidenav-container class="sidenav-container">

      <mat-sidenav #drawer class="sidenav" fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
        [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="!(isHandset$ | async)" style="background:black">
        <mat-toolbar class="menuBar">Menus</mat-toolbar>
        <mat-nav-list>
          <a class="menuTextColor" mat-list-item routerLink="/settings">Link 1</a>
        </mat-nav-list>
      </mat-sidenav>

      <mat-sidenav-content>
        <mat-toolbar class="toolbar">
          <button class="menuTextColor" type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()"
            *ngIf="isHandset$ | async">
            <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
          </button>
          <span class="toolbarHeading">Application Title</span>
        </mat-toolbar>

//Content area ,need to show the components related to the side menu

      </mat-sidenav-content>

    </mat-sidenav-container>

app.components.ts

<router-outlet></router-outlet>

В app.component.ts у меня есть

app.module.ts

const routings: Routes = [
    { path: '', redirectTo: '/login', pathMatch: 'full' },
    { path: 'login', component: LoginComponent },
    { path: 'home', component: HomeComponent },
    { path: 'settings', component: SettingsComponent },
    { path: '**', redirectTo: '/login', pathMatch: 'full' },
];

, здесь я определил маршруты.

может кто-нибудь мне помочьчтобы исправить это.

Answer 1

То, что вы хотите, это дочерний маршрут.

Домашний компонент должен иметь <router-outlet></router-outlet>, а также компонент вашего приложения.Затем вы захотите создать новый компонент, который будет содержать содержимое, которое вы хотите заменить в вашем основном компоненте.

<mat-sidenav-container class="sidenav-container">

  <mat-sidenav #drawer class="sidenav" fixedInViewport="true" [attr.role]= (isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="!(isHandset$ | async)" style="background:black">
    <mat-toolbar class="menuBar">Menus</mat-toolbar>
    <mat-nav-list>
      <a class="menuTextColor" mat-list-item routerLink="/settings">Link 1</a>
    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content>
    <mat-toolbar class="toolbar">
      <button class="menuTextColor" type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()"
        *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span class="toolbarHeading">Application Title</span>
    </mat-toolbar>

    // The new part
    <router-outlet></router-outlet>

  </mat-sidenav-content>

</mat-sidenav-container>

Затем обновите ваши маршруты примерно так:

const routings: Routes = [
  { path: '', redirectTo: '/login', pathMatch: 'full' },
  {
    path: 'home',
    component: HomeComponent,
    children: [
      { path: '', component: NewComponent },
      { path: 'settings', component: SettingsComponent },
    ]
  },
  { path: 'login', component: LoginComponent },
  { path: '**', redirectTo: '/login', pathMatch: 'full' },
];

Маршрут /home будет выглядеть так же, как раньше, даже если это новый компонент, обернутый домашним компонентом.Маршрут /home/settings будет содержать компонент настроек в вашем домашнем компоненте.

Answer 2

Вы должны использовать что-то вроде этого.Создайте app.component.html и app.component.ts в своем коде записи app.component.html как:

<app-header *ngIf=" this.session_data != null " ></app-header>
<mz-progress [backgroundClass]="'grey lighten-4'" *ngIf=" progress == true"></mz-progress>
<router-outlet></router-outlet>
<app-footer></app-footer>

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

. Таким образом, вы можете поместить свою боковую панель здесь как верхний или нижний колонтитул и написать свой html & .ts код для верхнего или нижнего колонтитула.или боковую панель как отдельные компоненты.

В вашем header / sidebar.html напишите:

<div class="app-header" *ngIf="header == true">
//write your html here
</div>

Теперь, в вашем app.module.ts загрузите AppComponent как:

bootstrap: [AppComponent],

и определите ваши маршруты как:

export const routes: Routes = [//routing definations
   { path: '', component: LoginComponent, canActivate: [Guard1] },
   { path: 'dashboard', component: DashboardComponent, canActivate: [Guard] },
   { path: 'afterDashboard', component: AfterDashboardComponent, canActivate: [Guard, DateGuard] },
   { path: 'formlist', component: FormlistComponent, canActivate: [Guard, DateGuard] }
},
];

Надеюсь, это поможет, что вы просили, я добился того же с помощью этого.