Angular2 navbar-subnavbar，檢查導航欄鏈接後顯示subnav菜單

Question

在subnav我想創建一個組件，如果它的這個（/公司）鏈接，顯示我subMenus按鈕。

Navbar的部件：

export class NavbarComponent implements OnInit 

{ 
    navbar = [ 

    { 
     name: 'Company', 
     link: '/company', 
     subMenu: [ 
     { name: 'test1', link: '/test1'}, 
     ] 
    }, 
    { 
     name: 'About', 
     link: '/about', 
     subMenu: [ 
     { name: 'test2', link: '/test2'}, 
     ] 
    }, 

Answer 1

使用下面的代碼。在這您導航欄組件將包含以下標記

<div *ngFor="let menu in navbar" > 
    <a [routerLink]="['menu.link']">{{menu.name}} </a> 
    <sub-menu [menus]="menu.subMenu"> </sub-menu> 
</div> 

你的子菜單組件將下面的代碼

import { Component, OnInit,Input } from '@angular/core'; 

@Component({ 
    selector: 'sub-menu', 
    template: ` 
     <div *ngFor="let menu of menus"> 
      <a [routerLink]="['menu.link']">{{menu.name}} </a> 
     </div> 
    ` 
}) 
export class StepComponent implements OnInit { 
    @Input() menus: any[] = []; 
    constructor() { 
     .... 
    } 

    ngOnInit() { } 
}