2017-09-04 22 views
0

で使用されたとき、私は残り-APIサーバーからメニュー構成を取得するためにサービスを使用してコンポーネントがあります。角度パス属性コンポーネントは、テンプレート

サービス:

import { Injectable } from '@angular/core'; 
import { HttpClient } from '@angular/common/http'; 

import { Observable } from 'rxjs/Observable'; 

import { environment } from '../../environments/environment'; 

export class Menu { 

} 

@Injectable() 
export class MenuService { 
    private _wpAng = environment.wpAng; 

    constructor(private http: HttpClient) { } 

    public getMenu(menu) { 
    return this.http.get(this._wpAng + `menu/${menu}`); 
    } 

} 

だからここに私はこのメニューの設定をフェッチするmenu文字列を渡す必要があります:

コンポーネント:

import { Component, OnInit } from '@angular/core'; 
import { MenuService } from './menus.service' 


@Component({ 
    selector: 'app-menus', 
    templateUrl: './menus.component.html', 
    styleUrls: ['./menus.component.scss'], 
    providers: [MenuService] 
}) 
export class MenusComponent implements OnInit { 

    constructor(private menuService: MenuService) { } 

    ngOnInit() { 
    this.menuService.getMenu('main-menu').subscribe((menu => console.log(menu)),(err =>'main-menu don`t exist')) 
    } 

} 

ここで私はmain-menuの設定を取得し、すべて正常に動作します。

問題は、複数のメニューがある場合です。また、メインビューのさまざまな部分で同じコンポーネントを使用したいと考えています。だから私の問題は、コンポーネントがビューに読み込まれたときにメニューの識別情報を渡す方法ですか?あなたのMenusComponentにいくつか@Inputを追加する必要が

to use the main-menu 
<app-menus menu='main-menu'></app-menus> 

to use other-menu 
<app-menus menu='other-menu'></app-menus> 

答えて

関連する問題