Html 导航工具栏和侧导航未进入其他组件

我找了很多这个问题，但仍然找不到答案

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

这是我写的文件

app.component.html

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

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

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>

这是输出屏幕

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

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

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

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

请尝试以下方法： -在app.component.html中删除ngIf：

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

这是因为您希望您的applayoutmodel组件始终可用，即使您单击“dashboard”。这是您的路由器出口跳转的地方：

---

他渲染仪表板组件以代替标记，并保持applayoutmodel组件渲染和完整。请尝试此操作并让我知道…

如果您删除

*ngIf

，它会显示吗？是的，但它会影响登录屏幕，如果我删除它，则不会显示完整的登录屏幕。因此，您需要弄清楚为什么

用户id

会被设置为未定义。我建议在AppComponent周围添加一些console.logs，看看是否可以看到发生了什么on@user184994，但两个视图（即侧导航、工具栏和仪表板组件）重叠。这是输出屏幕@Milos Kovacevic，如何分离登录组件？

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

}

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

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