动态地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任何事件在其他组件

回答

相关问题