使用智能组件内部使用2个参数的方法重构智能/哑组件中的组件

Question

我试图按照我的角度项目中的智能/哑组件模式重构我的代码，但我坚持以下情况：

我有一个组件CategoriesComponent，它包含一个表，我想移到一个哑组件CategoriesTableComponent。

因此，我将选项卡模板移动到哑组件，并将智能组件链接到我的哑组件，输入和输出如下所示：

categories.component.ts (智能组件)

export class CategoriesComponent implements OnInit {

  @Input() theme: Theme;

  categories$: Observable<Category[]>;

  [...]

  /**
   * Delete a selected category on the server and the data store
   * @param category the category to delete
   */
  onDeleteCategory(themeId: string, category: Category) {
    this.categoryStoreService.deleteCategory(themeId, category);
  }
}

categories.component.html (智能组件)

<div class="container" *ngIf="theme">

  [...]

  <app-categories-table [theme]="theme"
                        [categories]="categories$ | async"
                        (deleteCategory)="onDeleteCategory($event)"></app-categories-table>
</div>

类别-table.Component.ts(哑组件)

export class CategoriesTableComponent {

  @Input() theme: Theme;
  @Input() categories: Category[];
  @Output() deleteCategory: EventEmitter<{themeId: string, category: Category}> = new EventEmitter();

  constructor() { }

}

categories-table.component.html (哑组件)

<div class="row">
  <div class="table-responsive">
    <table class="table table-hover">
      <thead>
        <tr>
          <th>Name</th>
          <th>Description</th>
          <th></th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let category of categories">
          [...]
          <td>
            <button class="btn btn-outline-dark" type="button" title="delete category" (click)="deleteCategory.emit({theme._id, category})">
              <i class="fas fa-trash"></i>
              Delete
            </button>
          </td>
          [...]

但是我在控制台中有一条错误消息：

未知错误:模板解析错误:解析器错误:缺少预期:在ng:///AppModule/CategoriesTableComponent.html@26:87中deleteCategory.emit({theme._id，类别})的第27列(“ERROR ->="deleteCategory.emit({theme._id，类别})”> ")：ng:///AppModule/CategoriesTableComponent.html@26:87

我知道它在deleteCategory.emit({theme._id, category})声明中，但我想知道是否有一种方法可以内联地完成，而不需要在类别中编写另一个方法-table.Component.ts

提前谢谢你的帮助。

Answer 1

错误消息告诉您，您缺少一个冒号

deleteCategory.emit({theme._id, category})

实际上，这是无效的JavaScript。正确的代码是

deleteCategory.emit({themeId: theme._id, category: category})