Question

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

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

这里Home组件具有工具栏和侧边菜单栏，如果用户从侧边菜单栏中选择任何一个，我想在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>。然后，您将需要创建一个新组件，以将要替换的内容保存在主组件中。

<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的“设置”部分将由“主页”部分包装。

Answer 2

您应该使用类似这样的东西。在app.component.html中创建一个app.component.html和app.component.ts，代码如下：

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

希望这对您有帮助，我已经通过使用此方法实现了同样的效果。

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

2 个答案: