如何在Home组件的内容区域中显示组件，而不是在Angular 5中显示单独的页面 [英] How to show components in the content area of home component instead of separate page in Angular 5

问题描述

我是Angular 5的新手，在这里我面临着组件布线的问题.

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

我想做的是，当用户首先打开应用程序时，它应该显示一个登录屏幕(具有浏览器窗口完整高度和宽度的登录屏幕).一旦用户成功通过验证，便可以用户进入 Home组件.

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.

此处Home组件具有工具栏和侧边菜单栏，如果用户从侧边菜单栏中选择任何一个，我想在home组件的内容区域中显示相关(组件)数据.

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 .

当用户从侧面菜单栏中选择任何菜单时，如果受关注的组件未显示在Home组件的内容区域中，则会出现问题，它将作为一个单独的组件打开并显示为全屏.

home.component.ts

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

app.components.ts

<router-outlet></router-outlet>

在app.component.ts中，我有

In app.component.ts I have the

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

在这里，我定义了路线.

here I have defined the routes .

谁能帮我解决这个问题.

can anyone help me to fix this .

推荐答案

您想要的是一条子路线.

What you want is a child route.

home组件和您的应用程序组件都需要具有<router-outlet></router-outlet>.然后，您将需要创建一个新组件，以将要替换的内容保存在主组件中.

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

路由/home的外观将与以前相同，即使它现在是由home组件包装的新组件.路由/home/settings的设置"组件将由"home"组件包装.

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.

这篇关于如何在Home组件的内容区域中显示组件，而不是在Angular 5中显示单独的页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！