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

在模板中使用组件时，将角度传递属性赋予组件

1 个答案: