他のコンポーネントの任意のイベントによってangular2の左ナビゲーションメニューに動的にリンクを追加します

Question

私のアプリケーションでは。ヘッダーにドロップダウンがあり、利用可能なアプリが表示されます。 誰かがドロップダウンからアプリを選択すると、次のようになります。 -

ビューの選択に応じて左側のナビゲーションには、リンクが動的に追加されます。つまり、利用可能なナビゲーションがある場合、app3がヘッダーのドロップダウンから選択された場合、矢印でマークされたビューにリンクが作成されます。

コードそれに

import {Component, OnInit} from '@angular/core'; 
import {CustomViewNavigationComponent} from './custom-view-navigation.component'; 
import {CookieService} from 'angular2-cookie/core'; 

@Component({ 

    selector: 'sa-navigation', 
    templateUrl: 'navigation.component.html', 
    providers: [CustomViewNavigationComponent, CookieService] 
}) 
export class NavigationComponent implements OnInit { 

    constructor() { 
    } 

    ngOnInit() { 
    } 

} 

navigation.component.tsのテンプレートは、ナビゲーションを作成するための

<custom-view-navigation></custom-view-navigation> 

を追加しています。それにはカスタムビュー-navigation.component.tsため

コードが

import {Component, OnInit} from '@angular/core'; 
import {JsonApiService} from "../../../shared/api/json-api.service"; 
import {CookieService} from 'angular2-cookie/core'; 
import {Message} from 'primeng/primeng'; 
import {Router, ActivatedRoute, Params} from '@angular/router' 
import {CustomViewNavigationComponent} from "../../navigation/custom-view- 
navigation.component" 


@Component({ 
    selector: 'custom-view-navigation', 
    templateUrl: 'custom-view-navigation.component.html', 
    providers: [JsonApiService, CookieService] 
}) 
export class CustomViewNavigationComponent implements OnInit { 
    forms = []; 
    msgs: Message[] = []; 
    constructor(private _jsonApiService: JsonApiService, private _cookieService: CookieService, 
     private _route: ActivatedRoute, 
     private _router: Router) { 
    } 
    ngOnInit() { 
     this.getCompletedFormViews(); 
    } 
    getCompletedFormViews() { 
     var getViews =() => { 
      var appID = this._cookieService.get("AppID") 
      this.msgs.push({ severity: 'success', summary: 'App Delete', detail: 'App deleted successfully.' }); 
      this._jsonApiService.getViewsByAppID(appID).subscribe((forms) => { 
       this.forms = forms; 
      }); 
     } 
     setTimeout(function() { 
      getViews(); 
     }, 2000); 
    } 
} 

が可能apps.component.tsに

import {Component, OnInit} from '@angular/core'; 

    @Component({ 
     selector: 'sa-available-apps', 
     templateUrl: 'available-apps.component.html' 
    }) 
    export class AvailableAppsComponent implements OnInit { 

     constructor(){ 

     } 
     ngOnInit() 
     { } 
     setCookies(event) { 
      var renderView=new CustomViewNavigationComponent(this.jsonApiService,this._cookieService,null,this._router); 
     renderView.getCompletedFormViews(); 
    } 

    } 

テンプレート

<li> 
    <a title="Views"> 
     <span class="menu-item-parent">{{'Views' | i18n}}</span> 
    </a> 
    <ul> 
     <li routerLinkActive="active" *ngFor="let form of forms"> 
      <!--<a (click)="linkClicked(form._id)" routerLink="/completed/all/{{form._id}}">{{form.name | i18n}}</a>--> 
      <a routerLink="/completed/all/{{form._id}}">{{form.name}}</a> 
     </li> 
    </ul> 
</li> 

コードです

it's templa私はドロップダウンがあります： -

<p-dropdown [options]="listtodisplayindropdown" filter="filter" 
       [(ngModel)]="selectedApp" (onChange)="setCookies($event)"></p-dropdown> 

コード構造の問題がある場合は、私にお勧めします。この問題を解決する方法は何ですか？

Answer 1

Iは次のようにこのタスクを完了した： - 方法

 setCookies(event) { 
      this.getCustomviews(event.value); 
    } 
getCustomviews(selectedAppID) { 
     this.jsonApiService.getViewsByAppID(selectedAppID).subscribe((forms) => { 
       CustomViewNavigationComponent.getCustomViews(forms); 
      }); 
    } 

とカスタムビューnavigation.component.tsでは、静的メソッドを追加）setCookiesで可能app.component.ts（で

static that; 
    constructor() { 
      CustomViewNavigationComponent.that=this; 
    } 

    static getCustomViews(forms) 
     { 
      console.log(CustomViewNavigationComponent.that); 
      CustomViewNavigationComponent.that.forms=forms; 
     }