Sidenav 和工具栏未出现在角度 4 的新组件中

Question

我正在尝试在我的 Angular 应用程序中使用 mat 工具栏和侧导航。我有一个名为 app-layout 的组件，它同时具有工具栏和侧导航，这是代码，

<div class="yaanapage">
  <mat-toolbar color="primary" class="toolbar">
  <button mat-icon-button (click)="sidenav.toggle()"><mat-icon>menu</mat-icon></button>
  <span>YAANA-</span>
  </mat-toolbar>

  <mat-sidenav-container fullscreen  autosize style="top: 80px !important;">
    <mat-sidenav #sidenav mode="push" opened="false" class="sideNav">
      <mat-nav-list>
        <mat-list-item (click)="onDashboardClicked()">Dashboard</mat-list-item>
        <a><mat-list-item>Incidents</mat-list-item></a>
        <a><mat-list-item>Users</mat-list-item></a>
    </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content >
      <router-outlet></router-outlet>
  </mat-sidenav-content>
  </mat-sidenav-container>
  </div>

它显示工具栏和侧导航，现在在侧导航上，我有不同的组件，即仪表板、用户等。 现在，当我单击仪表板时，仪表板视图被替换为 。但事实并非如此，没有显示完整的侧导航和工具栏，只显示仪表板视图。 仪表板视图是，

<mat-form-field>
   <mat-select placeholder="Choose location" (change)="onChange($event)" (ngModel)="yaanaServiceLocations">
    <mat-option *ngFor="let location of yaanaServiceLocations" [value]="location">
      {{ location.areaName }}
    </mat-option>
   </mat-select>
  </mat-form-field>
    <agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="zoom">
        <agm-marker *ngFor="let marker of coordinates; let i = index" 
        [iconUrl]="icon" 
        [latitude]="marker.latitude" 
        [longitude]="marker.longitude"
        [markerClickable]="true"
        (markerClick)="markerClicked(marker.latitude,marker.longitude)">
        <agm-snazzy-info-window [closeWhenOthersOpen]="true" [maxHeight]="300" [maxWidth]="1400"
        [backgroundColor]="'orange'" [padding]="'20px'">
          <ng-template>
            <mat-card>{{ pLocationId }}  {{ pLocationName }}</mat-card><br/>
              <mat-grid-list cols="12" rowHeight="100px" (ngModel)="pCycle">
                <mat-grid-tile [colspan]="4" [rowspan]="2" *ngFor="let cycle of pCycle; let i = index" [style.background]="orange"
                [style.padding-right]="'50px'" [style.background]="'white'">
                    <mat-grid-tile-header [style.height]="20">{{i+1}}</mat-grid-tile-header>
                  <div [style.background]="orange">
                    <i class="material-icons">motorcycle</i>
                    <span [style.color]="white" >{{cycle.qrCode}}</span><br/>
                    <br/>
                    <i class="material-icons">battery_alert</i>
                    <span>{{ cycle.batteryLevel }}</span>

                  </div>
                  <mat-grid-tile-footer [style.background]="yellow">
                    <button mat-mini-fab (click)="showDirection(cycle.latitude, cycle.longitude)">
                      <mat-icon>navigation</mat-icon>
                    </button>
                  </mat-grid-tile-footer>
                </mat-grid-tile>
                </mat-grid-list>
          </ng-template>

        </agm-snazzy-info-window>
        <agm-direction *ngIf="dir" [origin]="dir.origin" [destination]="dir.destination" [visible]="show"></agm-direction>
    </agm-marker>
    <div ng-show="showInfo" class="InfoWindow">
        <h2> I am InfoWindow</h2>
      </div>
    </agm-map>

路由模块有如下代码，

const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'login', component: LoginComponent },
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent},
  {
    path: 'applayout', component: AppLayoutComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {useHash: false })],
  exports: [RouterModule]
})

app.component.html

<div [class]="theme">
  <router-outlet></router-outlet>
</div>

请纠正我在新组件中同时显示工具栏和侧边导航。

Answer 1

有两个选项。（最喜欢的2个选项）

1)您必须创建一个母版页，您的应用程序将在其中呈现如下。

在您的母版页中（如果您没有母版页，请将其放入 appcomponent 文件以获取更多信息，请查看angular.io）

<applayout>
<router-outlet></router-outlet>
</applayout>

现在您的仪表板页面将在应用布局之间呈现，因此您将在同一页面中同时拥有应用布局视图和仪表板视图。

2) 除此之外，您还可以做一件事，将您的应用程序代码放在 appcomponent 文件中，并且在您想要呈现仪表板页面的任何地方放置他们的 router-outlet 标记。这样，您可以轻松地使用侧导航和工具栏呈现仪表板视图

在我的项目中我是这样做的::

app.component.html

<div class="container">
    <nav class='navbar navbar-inverse'>
         <div class='container-fluid'>
           <ul class='nav navbar-nav'>
             <li><a [routerLink]="['home']">Home</a></li>
             <li><a [routerLink]="['books']">Book List</a></li>
             <li><a [routerLink]="['todoList']">ToDo</a></li>
             <li><a [routerLink]="['blogs']">Live Blogs</a></li>
           </ul>
           <!-- <ul *ngIf="username" class='nav navbar-nav navbar-right'>
             <li style='float:right;'><a (click)="logout()">Logout</a></li>
          </ul>
          <ul *ngIf="!username" class='nav navbar-nav navbar-right'>
             <li style='float:right;'><a [routerLink]="['login']">LogIn</a></li>
          </ul> -->
          <ul *ngIf="id" class='nav navbar-nav navbar-right'>
            <li style='float:right;'><a (click)="logout()">LogOut</a></li>
            <li style='float:right;'><a [routerLink]="['profile']">Profile</a></li>
         </ul>
          <ul *ngIf="!id" class='nav navbar-nav navbar-right'>
            <li style='float:right;'><a [routerLink]="['login']">LogIn</a></li>
            <li style='float:right;'><a [routerLink]="['register']">Register</a></li>
         </ul> 
        </div>
   </nav>    
  <div class='container'>
  <router-outlet></router-outlet>
  </div>
  </div>       

在<router-outlet></router-outlet> 之间，我的其他组件将被加载，所以如果你希望你的sidenav 在所有页面中，然后像这样使用它。