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

Question

我是 Angular 5 的新手，这里我遇到了组件路由问题。

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

这里 Home 组件有工具栏和侧边菜单栏，如果用户 select 从侧边菜单栏编辑任何内容，我想在 home 组件的内容区域显示相关（组件）数据。

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

当用户 select 侧边菜单栏中的任何菜单相关组件未显示在 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

你应该使用这样的东西。创建一个 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>.[=19 下加载=]

因此，您可以将侧边栏作为页眉或页脚放在此处，并为您的页眉或页脚或侧边栏编写 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] }
},
];

希望这对您有所帮助，我已经通过使用它实现了同样的目标。

Answer 2

你要的是子路由

主页组件需要有一个 <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 会将您的设置组件包裹在您的主页组件中。

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

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

typescript

angular2-routing

angular

angular5