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

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

}

以下是输出屏幕，

成功登录后，第一页是

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

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

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

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组件。请试试这个让我知道......

导航工具栏和侧导航不会进入其他组件

1 个答案: