导航工具栏和侧面导航未出现在其他组件中 [英] Nav toolbar and side nav not coming in other components

问题描述

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

在我的应用中，成功登录页面后会显示侧边导航和工具栏.当在侧边导航中单击一个项目(组件)时，会显示相应的组件，但工具栏不显示，侧边导航也显示.

这是我写的文件，

app.component.html

<应用程序应用程序模型></应用程序应用程序模型>
<div class="容器"><路由器插座></路由器插座>

app.component.ts,

import { Component, Input, OnInit } from '@angular/core';从@angular/router"导入 { Router, NavigationExtras, ActivatedRoute , Params};从 '../app/pages/models/myGlobals' 导入 * 作为全局变量；从'../serviceProviders/loginservice'导入{登录服务}；@成分({选择器:'app-root'，templateUrl: './app.component.html',styleUrls: ['./app.component.scss']})导出类 AppComponent 实现 OnInit {标题 = '应用';用户 ID:字符串 = 未定义；构造函数(私人路线:ActivatedRoute，专用路由器:路由器，私有登录服务:LoginService ) {}ngOnInit() {如果(this.router.url.length === 1){this.user_id = 未定义；} 别的 {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;}//订阅路由事件}}

app-routing.module.ts,

import { NgModule } from '@angular/core';从'@angular/common'导入{CommonModule}；从@angular/router"导入 { RouterModule, Routes };import { LoginComponent } from './pages/login/login.component';从 './app.component' 导入 { AppComponent };从'../app/pages/dashboard/dashboard.component'导入{仪表板组件}；const 路由:路由 = [{路径:'登录'，组件:登录组件}，{path: '', redirectTo: '/login', pathMatch: 'full'},{路径:'appplayout'，组件:AppComponent}，{路径:'仪表板'，组件:仪表板组件}];@NgModule({进口:[通用模块，RouterModule.forRoot(路由)],出口:[路由器模块],声明:[]})导出类 AppRoutingModule { }

appplayoutmodel.component.html,

<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>
</mat-toolbar><mat-sidenav-container class="sideContainer" fullscreen autosize style="top: 80px !important;"><mat-sidenav #sidenav mode="push" opens="false" class="sideNav"><mat-nav-list><nav class="menuItems"><a routerLink="/dashboard">仪表板</a></nav><nav class="menuItems"><a routerLink="/login">登录</a></nav></mat-nav-list></mat-sidenav></mat-sidenav-container>

appplayoutmodel.component.ts,

import { Component, OnInit } from '@angular/core';从 '@angular/router' 导入 { Router, NavigationExtras };@成分({选择器:'app-appplayoutmodel'，templateUrl: './appplayoutmodel.component.html',styleUrls: ['./appplayoutmodel.component.scss']})导出类 ApplayoutmodelComponent 实现 OnInit {构造函数(私有路由器:路由器){}ngOnInit() {}}

这是输出屏幕，

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

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

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

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

解决方案

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

<应用程序应用程序模型></应用程序应用程序模型>
<div class="容器"><路由器插座></路由器插座>

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

const 路由:Routes = [{路径:'登录'，组件:登录组件}，{path: '', redirectTo: '/login', pathMatch: 'full'},{ 路径:'应用程序'，组件:AppComponent，孩子们: [{路径:'仪表板'，组件:仪表板组件}]}];@NgModule({进口:[通用模块，RouterModule.forRoot(路由)],出口:[路由器模块],声明:[]})导出类 AppRoutingModule { }

这是因为即使您单击仪表板"，您也希望 applayoutmodel 组件始终可用.这是您的路由器插座插入的地方:他呈现您的仪表板组件代替标记，并保留呈现和完整的 applayoutmodel 组件.请试试这个，让我知道...

I have searched for this question a lot but still unable to find the solution.

In my app, the after successful logging in the page shows the side nav and toolbar. When an item(component) is clicked in side nav, the respective component is displayed but toolbar does not and also side nav.

Here are the files I have written,

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

}

Here are the output screens,

After successful loggin in, the firt page is,

When I click dashboard which is listed inside side nav, the output screen is,

But what I need even though after clicking dashboard item inside side nav, the dashboard component view should be displayed along with toolbar and side nav button just like in output screen one.

Please help me to solve this issue, I am not getting any ideas.

解决方案

Please try this: - in your app.component.html remove ngIf:

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

- in your app-routing.module.ts you need to put your dashboard component as child component of AppComponent like this:

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

This is because you want your applayoutmodel component always to be availible even if you click on 'dashboard'. This is where your router-outlet jumps-in: he renders your Dashboard component in place of tag, and preserves applayoutmodel component rendered and intact. Please try this and let me know...

这篇关于导航工具栏和侧面导航未出现在其他组件中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！