Question

我下载了角度4模板，因为它们在app.component.html中提供了导航元素。我想只显示我的登录页面作为我的默认页面并隐藏导航部分。如何在登录前隐藏导航？

＆＃13;

<!---App.component.html-->[enter image description here][1]

<div class="bg-dark" *ngIf="layout == 'empty-view-1'"></div>
<sample-modals *ngIf="controller == 'notifications' && view == 'modals' "></sample-modals>
<right-sidebar-1 *ngIf="  layout == 'default-sidebar-1' || layout == 'collapsed-sidebar-1' || layout == 'off-canvas-1' || layout == 'sidebar-over-1' || layout == 'top-navigation-1' || layout == 'top-navigation-2'"></right-sidebar-1>
<navbar-1 *ngIf="  layout == 'default-sidebar-1' || layout == 'collapsed-sidebar-1' || layout == 'off-canvas-1' || layout == 'sidebar-over-1' || layout == 'top-navigation-1' || layout == 'top-navigation-2'"></navbar-1>
<top-navigation-1 *ngIf=" layout == 'top-navigation-1'"></top-navigation-1>
<jumbotron-2 *ngIf="  layout == 'top-navigation-2'"></jumbotron-2>
<top-navigation-2 *ngIf="layout == 'top-navigation-2'"></top-navigation-2>
<div class="container-fluid">
    <div class="row">
			<div class="left-sidebar-placeholder" *ngIf="layout == 'default-sidebar-1' || layout == 'collapsed-sidebar-1' || layout == 'off-canvas-1' || layout == 'sidebar-over-1' || layout == 'top-navigation-1' || layout == 'top-navigation-2'"></div>
			<left-sidebar-1 *ngIf=" layout == 'default-sidebar-1' || layout == 'collapsed-sidebar-1' || layout == 'off-canvas-1' || layout == 'sidebar-over-1' || layout == 'top-navigation-1' || layout == 'top-navigation-2'"></left-sidebar-1>
			<div class="col main">
				<jumbotron-1 *ngIf=" controller != 'dashboards' && (layout == 'default-sidebar-1' || layout == 'collapsed-sidebar-1' || layout == 'off-canvas-1' || layout == 'sidebar-over-1' || layout == 'top-navigation-1')"></jumbotron-1>
				<div class="page">
						<router-outlet></router-outlet>
				</div>
			</div>
	</div>
</div>
<backdrops></backdrops>

＆＃13;

Answer 1

有很多方法可以做到这一点。但我喜欢这种方式，通过创建子路线和使用＆＃34;布局＆＃34;。

示例：创建一个仅包含router-outlet的组件

<!-- Base Layout-->
<router-outlet></router-outlet>

然后使用router-outlet和顶部导航创建一个新组件。

<!-- Site Layout -->
<!-- Top Navigation -->
<app-top-nav></app-top-nav>

<!-- content -->
<router-outlet></router-outlet>

在您的路线中

const routing: Routes = [
    {
        path: '',
        component: BaseLayoutComponent,
        children: [
            {
                path: 'login',
                component: LoginComponent
            }
        ]
    },
    {
    path: '',
    component: SiteLayoutComponent,
    children: [
        {
            path: 'home',
            component: HomeComponent
        }
     ]
    }
];

Answer 2

这就是您的服务看起来像

import { Observable } from 'rxjs/Rx';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Injectable } from '@angular/core';

@Injectable()
export class LoginService {
  private userLoggedIn = new BehaviorSubject(false);

  getLoggedIn(): Observable<boolean> {
    return this.userLoggedIn.asObservable();
  }

  getLoggedInValue(): boolean {
    return this.userLoggedIn.getValue();
  }

  setLoggedIn(val: string) {
    this.userLoggedIn.next(val);
  }
}

在您的LoginComponent

中

import { LoginService } from 'login.service';

constructor(
    private loginService: LoginService
) {  }

// If user is logged in, set value to true
private setLoggedIn(value: boolean): void {
   loginService.setLoggedIn(value);
}

在您的HomeComponent中

import { LoginService } from 'login.service';
import { Subscription } from 'rxjs/Subscription';

private userLoggedIn: false;
private subscription: Subscription;

constructor(
    private loginService: LoginService
) {  }


ngOnInit(): void {

    // get the current value
    this.subscription = this.loginService.getLoggedIn().subscribe(value => {
        this.userLoggedIn = value;
    });

}


ngOnDestroy(): void {

   if(this.subscription){
       this.subscription.unsubscribe();
   }

}

在你的模板中

<div class="bg-dark" *ngIf="userLoggedIn && (layout == 'empty-view-1')"></div>
<sample-modals *ngIf="userLoggedIn && (controller == 'notifications' && view == 'modals')"></sample-modals>
<right-sidebar-1 *ngIf="userLoggedIn && (layout == 'default-sidebar-1' || layout == 'collapsed-sidebar-1' || layout == 'off-canvas-1' || layout == 'sidebar-over-1' || layout == 'top-navigation-1' || layout == 'top-navigation-2')"></right-sidebar-1>

Answer 3

定义一个附加变量，用于指示用户是否已登录。将此变量添加到* ngIf语句中。

e.g。

private userLoggedIn: false;

<div class="bg-dark" *ngIf="userLoggedIn && (layout == 'empty-view-1')"></div>
<sample-modals *ngIf="userLoggedIn && (controller == 'notifications' && view == 'modals')"></sample-modals>
<right-sidebar-1 *ngIf="userLoggedIn && (layout == 'default-sidebar-1' || layout == 'collapsed-sidebar-1' || layout == 'off-canvas-1' || layout == 'sidebar-over-1' || layout == 'top-navigation-1' || layout == 'top-navigation-2')"></right-sidebar-1>

用户登录后，立即将此变量设置为true，并显示导航元素。

从角度4的登录页面隐藏导航栏

3 个答案: