Как создать динамическое меню в angular 2?

мне удалось создать динамическое меню на основе доступа пользователей сразу после входа пользователя в систему. Я думаю, что я не смог правильно сформулировать это требование в моем первоначальном вопросе. Вчера, при поиске "как заставить 2 компонента общаться друг с другом" я нашел это на сайте angular (см. ссылку ниже):

https://angular.io/docs/ts/latest/api/core/index/EventEmitter-class.html

мы можем достичь этого с помощью глобального EventEmitter. Вот как я реализовал его в своем коде:

GlobalEventManager:

import { Injectable, EventEmitter } from "@angular/core";

@Injectable()
export class GlobalEventsManager {
    public showNavBar: EventEmitter<any> = new EventEmitter();
    public hideNavBar: EventEmitter<any> = new EventEmitter();
}

приведенная ниже ссылка поможет вам понять, как реализовать auth guard (ограничение входа пользователя без входа в систему).

http://jasonwatmore.com/post/2016/08/16/angular-2-jwt-authentication-example-tutorial

Auth.Охрана.ТС:

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { GlobalEventsManager } from "../_common/gobal-events-manager";

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private router: Router, private globalEventsManager: GlobalEventsManager) { }

    canActivate() {

        if (localStorage.getItem('currentUser')) {

            this.globalEventsManager.showNavBar.emit(true);
            return true;
        }
        else {
            // not logged in so redirect to login page
            this.router.navigate(['/login']);
            this.globalEventsManager.hideNavBar.emit(true);
            return;
        }


    }
}

модель, используемая в меню.деталь.ТС

характеристики:

export class Features {
    Description: string;
    RoutePath: string;
}

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Features } from '../_models/features';
import { Http, Headers, RequestOptions, Response } from '@angular/http';
import { GlobalEventsManager } from "../_common/gobal-events-manager";

@Component({
    selector: 'nav',
    templateUrl: './menu.component.html'
})

export class MenuComponent {

    showNavBar: boolean = false;
    featureList: Features[] = [];
    private headers = new Headers({ 'Content-Type': 'application/json' });

    constructor(private http: Http, private router: Router, private globalEventsManager: GlobalEventsManager) {

        this.globalEventsManager.showNavBar.subscribe((mode: any) => {
            this.showNavBar = mode;

            if (this.showNavBar = true) {
    <!-- the below function expects user id, here I have given as 1 -->
                this.getFeatureListByLoggedInUser(1)
                    .then(list => { this.featureList = list; });
            }
        });

        this.globalEventsManager.hideNavBar.subscribe((mode: any) => {
            this.showNavBar = false;
            this.featureList = [];
        });
    }

    private getFeatureListByLoggedInUser(userID: number): Promise<Features[]> {
        return this.http.get(your api url + '/Feature/GetFeatureListByUserID?userID=' + userID)
            .toPromise()
            .then(response => response.json() as Features[])
            .catch(this.handleError);
    }

    private handleError(error: any): Promise<any> {
        console.error('An error occurred', error); // for demo purposes only
        return Promise.reject(error.message || error);
    }
}

<div id="navbar" *ngIf="showNavBar" class="navbar-collapse collapse navbar-collapse-custom">
    <ul class="nav navbar-nav nav_menu full-width">
        <li *ngFor="let feature of featureList" class="nav_menu" routerLinkActive="active"><a class="nav-item nav-link" [routerLink]="[feature.routepath]" routerLinkActive="active">{{feature.description}}</a></li>
    </ul>
</div>

App.Деталь.ТС:

    <!-- menu container -->
    <nav>
    </nav>
    <!-- main app container -->
    <div class="container-fluid body-content-custom">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 no-padding">
            <router-outlet></router-outlet>
        </div>
    </div>

    <footer class="footer">
        &nbsp;
    </footer>


In the last, we need to register the providers of menu and global event manager in app.module.ts

app.module.ts

/// <reference path="reset-password/reset-password.component.ts" />
/// <reference path="reset-password/reset-password.component.ts" />
import './rxjs-extensions';
import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule, XHRBackend } from '@angular/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { AuthGuard } from './_guards/auth.guard';

import { ContentHeaders } from './_common/headers';
import { GlobalEventsManager } from "./_common/gobal-events-manager";
import { MenuComponent } from "./menu/menu.component";

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        AppRoutingModule,
        ReactiveFormsModule
    ],
    declarations: [
        AppComponent,
        MenuComponent
    ],
    providers: [
        AuthGuard,
        ContentHeaders,
        GlobalEventsManager
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

надеюсь, это поможет!