ツリーメニュー（多階層メニュー）機能モジュールのAngular実装

前置き

アンギュラー多階層メニュー

1. <div
   class
   =
   "level-1"
   >
   <ng-template
    [
   ngIf
   ]
   =
   "menu.type === 'link'"
   >
   <div>
   <a
   class
   =
   "link level-1"
   routerLink
   =
   "{
   {menu.url}}"
   routerLinkActive
   =
   "selected"
    (
   click
   )
   =
   "toggleSubMenu(menu)"
   >
   {
   { menu.name }}
   </a>
   </div>
   </ng-template>
   <ng-template
    [
   ngIf
   ]
   =
   "menu.type === 'button'"
   >
   <div>
   <div
   class
   =
   "button heading"
    [
   ngClass
   ]
   =
   "{expand:menu.expand,selected:menu.isSelected}"
    (
   click
   )
   =
   "toggleSubMenu(menu)"
   >
    {
   {menu.name}}
   <div
   class
   =
   "icon"
   >
   <svg
   xmlns
   =
   "http://www.w3.org/2000/svg"
   focusable
   =
   "false"
   viewBox
   =
   "0 0 24 24"
   >
   <path
   d
   =
   "M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
   ></path>
   </svg>
   </div>
   </div>
   <ng-template
    [
   ngIf
   ]
   =
   "menu.expand"
   >
   <div
   class
   =
   "heading-children"
    [@
   inOut
   ]
   =
   "out"
   >
   <nav-item
    [
   menu
   ]
   =
   "menu"
    *
   
   ngFor
   =
   "let menu of menu.subMenu"
   ></nav-item>
   </div>
   </ng-template>
   </div>
   </ng-template>
   </div>
   

1. a 
   {
    text
   - -
   decoration
   :
    none
   ;
    color
   :
   #333;
   }
   .
   link
   ,
   .
   button 
   {
    display
   :
    block
   ;
    padding
   :
   10px
   15px
   ;
    transition
   :
    background
   -
   color 
   0.2s
    ease
   -
   in
   - -
   out
   0s
   ,
    color 
   0.3s
    ease
   -
   in
   - -
   out
   0.1s
   ;
   - -
   moz
   -
   user
   -
   select
   :
    none
   ;
   - -
   webkit
   - -
   user
   -
   select
   :
    none
   ;
   - -
   ms
   -
   user
   -
   select
   :
    none
   ;
   - -
   khtml
   -
   user
   -
   select
   :
    none
   ;
    user
   - -
   select
   :
    none
   ;
   }
   .
   button 
   {
    position
   :
    relative
   ;
   }
   .
   link
   :
   hover
   ,
   .
   button
   :
   hover 
   {
    color
   :
   #1976d2;
    background
   -
   color
   :
   #eee;
    cursor
   :
    pointer
   ;
   }
   .
   icon 
   {
    position
   :
    absolute
   ;
    right
   :
   0
   ;
    display
   :
   inline
   - -
   block
   ;
    height
   :
   24px
   ;
    width
   :
   
   24px
   ;
    fill
   :
    currentColor
   ;
    transition
   :
   -
   webkit
   - -
   transform 
   .
   15s
   ;
    transition
   :
    transform 
   .
   15s
   ;
    transition
   :
    transform 
   .
   15s
   ,
   - -
   webkit
   - -
   transform 
   .
   15s
   ;
    transition
   - -
   timing
   - -
   function
   :
    ease
   -
   in
   - -
   out
   ;
   }
   .
   heading
   -
   children 
   {
    padding
   - -
   left
   :
   14px
   ;
    overflow
   :
    hidden
   ;
   }
   .
   expand 
   {
    display
   :
    block
   ;
   }
   .
   collapsed 
   {
    display
   :
    none
   ;
   }
   .
   expand 
   .
   icon 
   {
   - -
   webkit
   - -
   transform
   :
    rotate
   (
   90deg
   );
    transform
   :
    rotate
   (
   90deg
   );
   }
   .
   selected 
   {
    color
   :
   #1976d2;
   }
   

1. import
   {
   Component
   ,
   Input
   ,
   OnInit
   }
   from
   '@angular/core'
   ;
   import
   {
   ActivatedRoute
   ,
   Router