通过其他组件中的任何事件，在angular2的左侧导航菜单中动态添加链接

在我的申请中。标题中有下拉列表显示可用的应用程序。 当有人从下拉列表中选择其中一个应用程序时，我希望如下所示：-

在左侧导航中，根据应用程序选择视图将动态添加链接。i、 e.如果从标题中的下拉列表中选择app3（如果有可用的导航），则应在箭头标记的视图中创建链接

导航代码.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() {
  }

}

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

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

    }

在它的模板添加

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

在它的模板中

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

在它的模板中，我有下拉列表：-

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

---

请建议我，如果有代码结构问题。解决这个问题的方法是什么

我像这样完成了这项任务：-

在setCookies（）方法中的available-app.component.ts中

在custom-view-navigation.component.ts中添加了一个静态方法

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

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

---

它成功了。

我完成了这个任务，就像：-

在setCookies（）方法中的available-app.component.ts中

在custom-view-navigation.component.ts中添加了一个静态方法

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

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

---

它起作用了。

“解决这个问题的方法是什么？”——>哪个问题？我在available.apps.component.ts中添加了一个方法，该方法通过传递所有参数实例化custom-view-navigation.component.ts类，然后调用方法getCompletedFormViews（）。虽然它从api获取最新数据，但没有反映到我使用*ngFor创建导航的ui中。请将此添加到您的问题中，否则，它会因为不清楚而被删除。我添加了代码@n00dl3请看一看。我正在谈论您遇到的问题，在你的问题中，除了标题很模糊外，你一次也没有提到这个问题。“解决这个问题的方法是什么？”——>哪个问题？我在available.apps.component.ts中添加了一个方法，它通过传递所有参数实例化custom-view-navigation.component.ts类，然后调用方法getCompletedFormViews（）。虽然它从api获取最新数据，但没有反映到我使用*ngFor创建导航的ui中。请将此添加到您的问题中，否则，它会因为不清楚而被删除。我添加了代码@n00dl3请看一看。我正在谈论您遇到的问题，在你的问题中，你一次也不说，除了在标题中，它是相当模糊的。