Question

我正在尝试在角度应用程序中使用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）您必须创建一个母版页，其中您的applayout将以这样的方式呈现。

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

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

现在，您的信息中心页面将在applayout之间呈现，因此您将在同一页面中同时拥有applayout视图和信息中心视图。

2）除此之外，你还可以做一件事，将你的applayout代码放在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，那么就像这样使用它。

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

1 个答案: