動態地angular2任何事件在其他組件

添加在左側導航菜單鏈接在我的應用程序。標題下拉菜單顯示可用的應用程序。當有人從下拉列表中選擇我想要的應用程序之一時： -動態地angular2任何事件在其他組件

根據應用程序選擇在左側導航視圖中將動態添加鏈接。即如果有可用的導航，則從頭部的下拉菜單中選擇app3，它應該在由箭頭標記的視圖中創建鏈接。

代碼navigation.component.ts

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

}

在它的模板添加

<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

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

代碼

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

    }

在它的模板我有下拉菜單： -

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

如果出現代碼結構問題，請給我建議。以及解決這個問題的方法是什麼？

來源

2017-04-11 Shashikant Pandit

「什麼是解決這個問題的方法是什麼？」 --->這問題？ – n00dl3

我在available.apps.component.ts中添加了一個方法，它通過傳遞所有參數實例化custom-view-navigation.component.ts類，然後調用方法getCompletedFormViews（）。雖然它從api獲取最新數據，但並未反映到我用* ngFor創建導航的ui中。 –

請將此添加到您的問題，否則，它會被刪除，因爲不清楚。 – n00dl3

我完成了這個任務，如： -

可供app.component.ts在setCookies（）方法

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

和自定義視圖navigation.component.ts添加靜態方法

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

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

它工作。

來源

2017-04-11 14:24:48

動態地angular2任何事件在其他組件

回答

相關問題