How to show components in the content area of home component instead of separate page in Angular 5

问题

I am new to Angular 5 ,Here I am facing a problem with component routing .

What I want to do is ,When a user open the app first it should show a login screen (login screen with full height and width of browser window).Once the user is successfully validated then the user get into the Home Component.

Here Home component has Toolbar and Side menu bar ,If user selected any any from side menu bar I want to show the relevant(component) data in the content area of the home component.

As of now everything works fine ,I mean when user opens the app login screen first displayed and successfully validated Home page displayed to the user .

Problem occurs when user select any menu from side menu bar the respected component not showing in the content area of the Home component ,it opens as a separate component and takes full screen.

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>

In app.component.ts I have the

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' },
];

here I have defined the routes .

can anyone help me to fix this .

回答1:

What you want is a child route.

The home component needs to have a <router-outlet></router-outlet> as well as your app component. Then you will want to create a new component to hold the content you want to replace in your main component.

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

Then update your routes to something like this:

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' },
];

The route /home will look the same as it used to even thou it is now the new component wrapped by the home component. The route /home/settings will have your settings component wrapped by your home component.

回答2:

You should use something like this. Create a app.component.html and app.component.ts, in your app.component.html write code as :

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

this will bring the header and footer on every page as default or you can put your condition over here as per pages and thee pages on which you will redirect will be loaded under the <router-outlet></router-outlet>.

Hence you can put your sidebar here as header or footer and write your html & .ts code for your header or footer or sidebar as separate components.

In your header/sidebar.html, write :

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

Now, in your app.module.ts, load your AppComponent as:

bootstrap: [AppComponent],

and define your routes as :

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] }
},
];

Hope this helps, what you have asked, i have achieved same by using this.

来源：https://stackoverflow.com/questions/52619969/how-to-show-components-in-the-content-area-of-home-component-instead-of-separate