Angular 2：函数

Question

我有一个服务，可以输入菜单项列表，并在* ng中加载项目。菜单项列表还包括菜单项的状态。

服务

  buttonlist = [
            {id: 1, menu: 'me', status: 'active',children: 2,3,4 },
            {id: 2, menu: 'home', status: 'nonactive'},
            {id: 3, menu: 'contact', status: 'nonactive'},
            {id: 4, menu: 'location', status: 'nonactive'}
];

组件

 <ul>
    <li *ngFor="let button of buttons "  [ngClass]="'active' == buttons[subButton].status ? 'active' : 'hide'"
(click)="execCommand(button)"
> 

    {{button.id}}

        <ul *ngFor="let subButton of button.children " >
        <li
        (click)="execCommand(button)"
        [ngClass]="'active' == buttons[subButton].status ? 'active' : 'hide'"
> 
            {{buttons[subButton].status}} </li>
        </ul>

    </li>
</ul>

组件功能

execCommand(button){
button.status = 'non-active'; 
}

如果我记录按钮状态，它确实显示我已更新对象数据但未呈现。如何使此按钮更新状态以显示活动类？

我的菜单基本上是id 1是顶级，其余是孩子和onclick我想在所有兄弟孩子上删除活动并且只活动我点击的按钮，除非我点击顶层而不是只有顶部水平活跃和所有孩子。

• 1
• • 2
• • 3
• • 4

我没有使用路由，因为我有一个包含多个菜单项级别的页面应用程序，如果用户点击它会加载一个标签。

Answer 1

有一种叫做事件传播的东西。单击子项时，正在调用execCommand(subButton)。但随后click事件转到父项并调用execCommand（button），因此它会使所有子项active=false。这就是我在点击处理程序中添加(click)="execCommand(subButton, $event)"和$event.stopPropagation()的原因。

import { Component, NgModule, OnInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  template: `
 <ul>
    <li *ngFor="let button of buttons "  [ngClass]="button.active ? 'active' : 'hide'"
(click)="execCommand(button, $event)"
> 

    {{button.id}}(active: {{button.active|json}})

        <ul *ngIf="button?.children" style="z-index: -1;" >
        <li *ngFor="let subButton of button.children"
        (click)="execCommand(subButton, $event)"
        [ngClass]="subButton.active ? 'active' : 'hide'"> 
            {{button.id}}(active: {{subButton.active|json}}) 
        </li>
        </ul>

    </li>
</ul>
  `
})
export class App implements OnInit {
  buttons = [
    {id: 1, menu: 'me', active: true, children: [
      {id: 5, menu: 'sublvl1', active: false},
      {id: 6, menu: 'sublvl2', active: false},
      {id: 7, menu: 'sublvl3', active: false},
      ] },
    {id: 2, menu: 'home', active: false},
    {id: 3, menu: 'contact', active: false},
    {id: 4, menu: 'location', active: false}
  ];
  constructor() {}
  
  ngOnInit() {}
  
  execCommand(button: any, $event){
    $event.stopPropagation();
    this.buttons.forEach(b => {
      b.active = false;
      b.children && b.children.forEach(b => b.active = false);
    });
    button.active = true; 
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Answer 2

您甚至可以通过对angular2使用条件类属性来简化此代码。 请通过此plunkr链接：

  

app.component.ts

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
    selector: 'my-app',
    template: `<div><h2>Hello</h2></div>
               <ul>
                   <li *ngFor="let button of buttons" (click)="execCommand(button, $event)">
                   <a class="menu" [class.active]="button.active">{{button.id}}-{{button.menu}}</a>        
                      <ul *ngIf="button.children" style="z-index: -1;" >
                         <li *ngFor="let subButton of button.children" (click)="execCommand(subButton, $event)">
                           <a class="menu" [class.active]="subButton.active">
               {{subButton.id}}-{{subButton.menu}}</a>
                         </li>
                      </ul>
                </li>
            </ul>`
    })
    export class App implements OnInit {
        buttons = [
            {id: 1, menu: 'me', active: true, children: [
               {id: 5, menu: 'sublvl1', active: false},
               {id: 6, menu: 'sublvl2', active: false},
               {id: 7, menu: 'sublvl3', active: false},
                ] },
            {id: 2, menu: 'home', active: false},
            {id: 3, menu: 'contact', active: false},
            {id: 4, menu: 'location', active: false}
            ];

     constructor() {}

     ngOnInit() {}

     execCommand(button: any, $event){
           $event.stopPropagation();
           this.buttons.forEach(b => {
                 b.active = false;
                 b.children && b.children.forEach(b => b.active = false);
           });
     button.active = true;
   }
 }

 @NgModule({
   imports: [ BrowserModule ],
   declarations: [ App ],
   bootstrap: [ App ]
 })

 export class AppModule {}

谢谢。