角度2：在导航栏中显示身份验证上的图标 [英] Angular 2: Displaying icons in navbar on authentication

问题描述

我的组件结构大致如此。我的应用程序组件有一个导航栏和路由器插座。导航栏具有标志，一些通用链接和一些特定链接，仅在用户登录和身份验证时显示。路由器插座根据路由网址加载家庭组件或墙壁组件。家庭组件包含登录组件，其中包含常规用户标识，密码和提交按钮。在提交时，登录成功后登录组件会发出一个事件。现在，如何在home组件（父）中捕获该事件？

如果我直接在应用程序下使用家庭选择器，我可以抓住该事件，将其泡到应用程序，然后使导航栏中的隐藏链接可见。

我不知道如何在home组件中捕获由login组件发出的事件，因为它加载在路由器输出中。

 <！ -  app.html  - >< div> < NAV> <！ - 产品标识 - > <！ - 一些通用链接 - > <！ - 验证时要显示的一些隐藏图标 - > < / NAV> < router-outlet>< / router-outlet>< / div><！ -  home.html  - >< div> < login>< / login>< / div><！ -  login.html  - >< div> <！ - 用户名和密码 - > <！ - 提交按钮 - 相关联的ts文件在成功登录时引发事件 - >< / div><！ -  wall.html  - >< div> <！ - 要在认证上显示的内容 - >< / div>  

谢谢，
Shilpa

解决方案

根据这个解决方案 - > http://plnkr.co/edit/KfcdDi?p=info

  // alert.service.tsimport {Injectable} from'@ angular / core'; import {Router，从'@ angular / router'导入{Navigation}，从'rxjs'导入{Observable}; import {Subject} from'rxjs / Subject'; @ Injectable（）export class AlertService {private subject = new Subject< any>（）; private keepAfterNavigationChange = false;构造函数（私有路由器：路由器）{//清除路由更改上的警报消息router.events.subscribe（event => {if（event instanceof NavigationStart）{if（this.keepAfterNavigationChange）{//仅保留单个位置更改this.keepAfterNavigationChange = false;} else {//清除alert this.subject.next（）;}}}）; } success（message：string，keepAfterNavigationChange = false）{this.keepAfterNavigationChange = keepAfterNavigationChange; this.subject.next（{type：'success'，text：message}）; } error（message：string，keepAfterNavigationChange = false）{this.keepAfterNavigationChange = keepAfterNavigationChange; this.subject.next（{type：'error'，text：message}）; } getMessage（）：Observable< any> {return this.subject.asObservable（）; }}  
 

  // login.componentprivate loggedIn（user1：user）{this.currentUser = user1; this._alertService.alert（login，true）; }  

  // app.componentngOnInit（）：void {th​​is.authenticated = this._authService.isLoggedIn（）; this._alertService.getMessage（）。subscribe（data => this.setData（data））; } private setData（data：any）{if（！this.authenticated）{if（data&&（data.type ==='login'）&& data.success === true）{this authenticated = true; } else {this.authenticated = false; }}}  
 p $ p> 

 <！ -  app.html  - > < nav class =navbar navbar-color> < div class =container-fluidid =nav_center> <！ - 品牌和切换被分组以获得更好的移动显示 - > < div class =navbar-header> < button type =buttonclass =navbar-toggle collapsed nav-expand-buttondata-toggle =collapsedata-target =＃navbar-collapse1aria-expanded =false* ngIf =authenticated > < span class =sr-only>切换导航< / span> < span class =icon-bar>< / span> < span class =icon-bar>< / span> < span class =icon-bar>< / span> < /按钮> < button type =buttonclass =nav-features nav-expand-button（click）=isCollapsed =！isCollapsed* ngIf =authenticated> < span class =sr-only>导航功能< / span> < span class =icon-bar>< / span> < span class =icon-bar>< / span> < span class =icon-bar>< / span> < /按钮> < a class =navbar-brandhref =＃> Outili< / a> < / DIV> <！ - 收集导航链接，表单和其他内容以进行切换 - > < div class =collapse navbar-collapseid =navbar-collapse1* ngIf =authenticated> <！ -  * ngIf = showNotification >  - > < ul class =nav navbar-nav navbar-right> < li class =navbar-icons> < a href =＃class =navbar-a> < span class =glyphicon glyphicon-inbox navbar-icons>< / span> < / A> < /锂> < li class =dropdown navbar-icons> < a href =＃class =dropdown-toggle navbar-adata-toggle =dropdownrole =buttonaria-haspopup =truearia-expanded =false> < span class =glyphicon glyphicon-user navbar-icons>< / span> < span class =caret navbar-icons>< / span> < / A> < ul class =dropdown-menu> < li>< a href =＃>个人资料< / a>< / li> < li>< a href =＃>设置< / a>< / li> < li role =separatorclass =divider>< / li> < li（click）=logout（）>< button type =buttonclass =btn>注销< / button>< / li> < / UL> < /锂> < / UL> < / div><！ -  /.navbar-collapse  - > < / div><！ -  /.container-fluid  - > < / nav>  

我在找

My component structure looks roughly like this. My app component has a nav bar and router outlet. The nav bar has logo, some generic links and some specific links to be shown on user login and authentication only. The router outlet loads the home component or the wall component based on the routing url. The home component contains the login component which contains the customary user id, password and submit button. On submit, and upon successful login, the login component emits an event. Now, how do I catch that event in the home component (parent)?

If I were to use the home selector directly under app, I could catch the event, bubble it up to app and then make the hidden links in the nav bar visible.

I am unaware how to catch the event emitted by login component in home component since it is loaded in the router output.

<!-- app.html -->
<div>
  <nav>
    <!-- Product logo -->
    <!-- Some generic links -->
    <!-- some hidden icons to be shown on authentication -->
  </nav>
  <router-outlet></router-outlet>
</div>

<!-- home.html -->
<div>
  <login></login>
</div>

<!-- login.html -->
<div>
  <!-- user name and password -->
  <!-- submit button - the associated ts file raises an event on successful login -->
</div>

<!-- wall.html -->
<div>
  <!-- Content to be displayed on authentication -->
</div>

Thanks, Shilpa

解决方案

Chanced upon this solution --> http://plnkr.co/edit/KfcdDi?p=info

//alert.service.ts

import { Injectable } from '@angular/core';
import { Router, NavigationStart } from '@angular/router';
import { Observable } from 'rxjs';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class AlertService {
    private subject = new Subject<any>();
    private keepAfterNavigationChange = false;

    constructor(private router: Router) {
        // clear alert message on route change
        router.events.subscribe(event => {
            if (event instanceof NavigationStart) {
                if (this.keepAfterNavigationChange) {
                    // only keep for a single location change
                    this.keepAfterNavigationChange = false;
                } else {
                    // clear alert
                    this.subject.next();
                }
            }
        });
    }

    success(message: string, keepAfterNavigationChange = false) {
        this.keepAfterNavigationChange = keepAfterNavigationChange;
        this.subject.next({ type: 'success', text: message });
    }

    error(message: string, keepAfterNavigationChange = false) {
        this.keepAfterNavigationChange = keepAfterNavigationChange;
        this.subject.next({ type: 'error', text: message });
    }

    getMessage(): Observable<any> {
        return this.subject.asObservable();
    }
}

//login.component

private loggedIn(user1: user) {
        this.currentUser = user1;
        this._alertService.alert("login", true);
     
    }

//app.component

ngOnInit(): void {
        this.authenticated = this._authService.isLoggedIn();
        this._alertService.getMessage().subscribe(data => this.setData(data));
    }

private setData(data: any) {
        if (!this.authenticated) {
            if (data && (data.type === 'login') && data.success === true) {
                this.authenticated = true;
            }
            else {
                this.authenticated = false;
            }
        }
    }

<!-- app.html -->
    <nav class="navbar navbar-color">
        <div class="container-fluid" id="nav_center">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed nav-expand-button" 
                        data-toggle="collapse" data-target="#navbar-collapse1" aria-expanded="false"
                        *ngIf="authenticated">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <button type="button" class="nav-features nav-expand-button"
                        (click)="isCollapsed = !isCollapsed" *ngIf="authenticated">
                    <span class="sr-only">Navigate features</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Outili</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="navbar-collapse1" *ngIf="authenticated">
                <!--*ngIf="showNotification">-->
                <ul class="nav navbar-nav navbar-right">
                    <li class="navbar-icons">
                        <a href="#" class="navbar-a">
                            <span class="glyphicon glyphicon-inbox navbar-icons"></span>
                        </a>
                    </li>
                    <li class="dropdown navbar-icons">
                        <a href="#" class="dropdown-toggle navbar-a" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                            <span class="glyphicon glyphicon-user navbar-icons"></span>
                            <span class="caret navbar-icons"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Profile</a></li>
                            <li><a href="#">Settings</a></li>
                            <li role="separator" class="divider"></li>
                            <li (click)="logout()"><button type="button" class="btn">Logout</button></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>

The alert service here does exactly what I am looking for.

这篇关于角度2：在导航栏中显示身份验证上的图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！