Question

我试图调用递归的@Input装饰器生成的函数。问题是，(click)事件不会影响儿童。只有父元素点击会发出一个事件。

import { Component, Input, Output, EventEmitter } from '@angular/core';
import {AdminCategory} from './admin-category.component'

@Component({
  selector: 'categories',
  template: `
     <div *ngFor="let cat of categories">
      <ul>
       <li>
         <span (click)="addCategory(cat)">{{cat.name}}</span>
         <categories [categories]="cat.children" </categories>
       </li>
      </ul>
    </div>
  `,
})
export class TreeView {
  @Input() categories;
  @Output() category: EventEmitter<AdminCategory> = new EventEmitter<AdminCategory>();

  addCategory(category: AdminCategory){
    this.category.emit(category);
  }
}

我在SO上找到了某个地方（遗憾的是现在找不到链接），添加($event)会解决问题，所以我尝试了这个：

import { Component, Input, Output, EventEmitter } from '@angular/core';
import {AdminCategory} from './admin-category.component'

@Component({
  selector: 'categories',
  template: `
     <div *ngFor="let cat of categories">
      <ul>
       <li>
         <span (click)="addCategory(cat)">{{cat.name}}</span>
         <categories [categories]="cat.children" (clickEvent)="onClickChild($event)"> asd</categories>
       </li>
      </ul>
    </div>
  `,
})
export class TreeView {
  @Input() categories;
  @Output() category: EventEmitter<AdminCategory> = new EventEmitter<AdminCategory>();

  addCategory(category: AdminCategory){
    this.category.emit(category);
  }

  onClickChild(event){
    console.log("asdas");
    this.category.emit(event);
  }
}

但是没有任何结果，console.log("asdas");永远不会发生。有人知道这个问题的原因吗？我做错了什么？

Answer 1

指令或组件中的输出属性将通过回调管理事件产生的更改的责任转移给父级。在这种情况下，函数的调用在树的节点上开始，通过输出(click)并使用相同的输出/回调方法调用“递归”onClickChild，直到它到达根的树。在角度中，该回调是template expression。

虽然以上所有内容都不值得，但如果使用像redux这样的集中式数据管理方法。根据我的经验，我推荐它，因为你不必完成上述所有操作。仅

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Store } from '@ngrx/store';

import { AppState } from '../store';
import { AdminCategory } from './admin-category.component';
import { AddCategoryAction } from './admin-category.actions';

@Component({
  selector: 'categories',
  template: `
     <div *ngFor="let cat of categories">
      <ul>
       <li>
         <span (click)="addCategory(cat)">{{cat.name}}</span>
         <categories [categories]="cat.children"> asd</categories>
       </li>
      </ul>
    </div>
  `,
})
export class TreeView {
  @Input() categories;

  contructor(private store: Store<AppState>) {}
  addCategory(category: AdminCategory){
    this.store.dispatch(new AddCategoryAction(category));
  }
}

我附上documentation和example app。如何构建AddCategoryAction，reducer

import { CategoryActionTypes, CategoryActionsUnion } from './category.actions';
import { EMPTY_ARR } from '../empties';

export type CategoryState = CategoryModel[];


export const CATEGORY_INIT: CategoryState = EMPTY_ARR;

export function reducer(state: CategoryState  = CATEGORY_INIT, action: CategoryActionsUnion): State {
  switch(action.type) {
    case CategoryActionTypes.ADD: {
      return state.concat(action.payload);
    }

    case CategoryActionTypes.RESET: {
      return CategoryInit;
    }

    case CategoryActionTypes.ANOTHER: {...

    default: {
      return state;
    }
  }
}

并导入AppModule

import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';
import { categoryReducer } from './category';

@NgModule({
  imports: [BrowserModule, StoreModule.forRoot({ category: categoryReducer })],
})
export class AppModule {}

您无需越过树来更改或检查状态

您可以详细了解here的优势。请享用。

递归子元素上的角度函数单击

1 个答案: