html - 导航工具栏和侧面导航不在其他组件中

Question

我已经搜索了很多这个问题，但仍然无法找到解决方案。

在我的应用程序中，成功登录页面后会显示侧导航和工具栏。在侧导航中单击项目（组件）时，会显示相应的组件，但工具栏和侧导航不会显示。

这是我写的文件，

app.component.html

<div *ngIf="user_id !== undefined">
    <app-applayoutmodel></app-applayoutmodel>
</div>
<div class="container">
    <router-outlet></router-outlet>
</div>

app.component.ts,

import { Component, Input, OnInit } from '@angular/core';
import { Router, NavigationExtras, ActivatedRoute , Params} from '@angular/router';
import * as globals from '../app/pages/models/myGlobals';
import { LoginService } from '../serviceProviders/loginservice';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'app';
  user_id: string = undefined;

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private loginservice: LoginService ) {}

    ngOnInit() {
      if ( this.router.url.length === 1) {
        this.user_id = undefined;
      } else {
      console.log('Url  ' + this.router.url);
      const urlParam = this.router.parseUrl(this.router.url).queryParams['property_id'];
      this.loginservice.user_id = urlParam;
      this.user_id = this.loginservice.user_id;
      }
      // subscribe to router event
    }
}

应用程序路由.module.ts，

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './pages/login/login.component';
import { AppComponent } from './app.component';
import { DashboardComponent } from '../app/pages/dashboard/dashboard.component';

const routes: Routes = [
  {path: 'login', component: LoginComponent},
  {path: '', redirectTo: '/login', pathMatch: 'full'},
  {path: 'applayout', component: AppComponent},
  {path: 'dashboard', component: DashboardComponent}
];
@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(routes)
  ],
  exports: [
    RouterModule
  ],
  declarations: []
})
export class AppRoutingModule { }

applayoutmodel.component.html,

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

    <mat-sidenav-container class="sideContainer" fullscreen  autosize style="top: 80px !important;">
      <mat-sidenav #sidenav mode="push" opened="false" class="sideNav">
        <mat-nav-list>
          <nav class="menuItems">
            <a routerLink="/dashboard">Dashboard</a>
          </nav>
          <nav class="menuItems">
            <a routerLink="/login">Login</a>
          </nav>
      </mat-nav-list>
      </mat-sidenav>
    </mat-sidenav-container>
    </div>

applayoutmodel.component.ts,

import { Component, OnInit } from '@angular/core';
import { Router, NavigationExtras } from '@angular/router';

@Component({
  selector: 'app-applayoutmodel',
  templateUrl: './applayoutmodel.component.html',
  styleUrls: ['./applayoutmodel.component.scss']
})
export class ApplayoutmodelComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit() {
  }

}

这是输出屏幕，

登录成功后，第一页是，

当我单击侧面导航内列出的仪表板时，输出屏幕是，

但是我需要的是，即使在单击侧导航内的仪表板项目后，仪表板组件视图应该与工具栏和侧导航按钮一起显示，就像在输出屏幕一中一样。

请帮我解决这个问题，我没有任何想法。

标签： htmlangularnavigationangular-router

Answer 1

请试试这个： - 在你的 app.component.html 中删除 ngIf：

<div>
    <app-applayoutmodel></app-applayoutmodel>
</div>
<div class="container">
    <router-outlet></router-outlet>
</div>

- 在您的 app-routing.module.ts 中，您需要将仪表板组件作为 AppComponent 的子组件，如下所示：

const routes: Routes = [
  {path: 'login', component: LoginComponent},
  {path: '', redirectTo: '/login', pathMatch: 'full'},
  { path: 'applayout', 
    component: AppComponent,
    children: [
        {path: 'dashboard', component: DashboardComponent }
    ]
  }
];
@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(routes)
  ],
  exports: [
    RouterModule
  ],
  declarations: []
})
export class AppRoutingModule { }

这是因为即使您单击“仪表板”，您也希望您的 applayoutmodel 组件始终可用。这就是你的路由器插座的作用：他渲染你的仪表板组件来代替标签，并保留渲染的 applayoutmodel 组件并且完好无损。请试试这个，让我知道...