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

查看:83
本文介绍了导航工具栏和侧面导航不在其他组件中的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我已经搜索了很多这个问题,但是仍然找不到解决方法.

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

这是我写的文件,

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

}

这是输出屏幕,

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

当我单击侧面导航栏中列出的仪表板时,输出屏幕为

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

请帮助我解决此问题,我没有任何想法.

解决方案

请尝试以下操作: -在您的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组件.请尝试这个,让我知道...

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆