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

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
    }
}

app-routing.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 { }

appayoutmodel.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>

appayoutmodel.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() {
  }

}

这是输出屏幕，

登录成功后，第一个页面是，

当我点击侧导航中列出的仪表板时，输出屏幕是，

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

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

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 组件始终可用，即使您单击“仪表板”也是如此。这是您的路由器插座跳入的地方： 他呈现您的 Dashboard 组件代替标记，并保留呈现和完整的 applayoutmodel 组件。请试试这个并告诉我...