如何在主组件的内容区域中显示组件而不是 Angular 5 中的单独页面

Question

我是 Angular 5 的新手，在这里我面临着组件路由的问题。

我想要做的是，当用户首先打开应用程序时，它应该显示一个登录屏幕（登录屏幕具有浏览器窗口的全高和全宽）。一旦用户成功验证，用户就会进入Home 组件。

这里 Home 组件有 Toolbar 和 Side menu bar ，如果用户从侧边菜单栏中选择了任何一个，我想在 home 组件的内容区域中显示相关（组件）数据。

截至目前一切正常，我的意思是当用户打开应用程序登录屏幕时首先显示并成功验证主页显示给用户。

当用户从侧边菜单栏中选择任何菜单时会出现问题，该组件未显示在 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

你想要的是子路由。

home 组件需要有一个<router-outlet></router-outlet>和你的 app 组件一样的组件。然后，您将需要创建一个新组件来保存要在主组件中替换的内容。

<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 组件包装的新组件，路由看起来也会和以前一样。该路由/home/settings将使您的设置组件由您的主组件包装。