角通屬性組件時該組件在該模板用於

Question

我有使用服務來從一個REST的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配置，並且一切正常。

問題是當我有多個菜單。我想在主視圖的不同部分使用相同的組件。所以我的問題是如何在組件加載到視圖中時傳遞菜單標識？例如，我需要這樣的東西：

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

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

Answer 1

你需要一些@Input添加到您的MenusComponent。

請參閱以下鏈接例如：https://angular-2-training-book.rangle.io/handout/components/app_structure/passing_data_into_components.html