Angular7：如何不点击调用方法？

Question

我觉得我没有看到明显的东西，但是，我无法弄清楚.. 我有一个显示一堆列表的布局组件，每个列表都有自己的标题：

<h1>Vegetables</h1>
<food-list-component></food-list-component>

<h1>Fruit</h1>
<food-list-component></food-list-component>

<h1>Sweets</h1>
<food-list-component></food-list-component>

在 food-list-component 内部我调用了一个接受参数的简单过滤方法（对于 vegetables/fruit/sweets 也是 food type）。由于在应用程序的其他任何地方我都根据某些事件（单击或输入）调用此过滤方法，所以我不知道如何在这个仅显示列表的静态布局组件中过滤这些列表。

Answer 1

据我了解，所有 food-list-component 个实例都是相同的并且具有相同的数据。您需要使用不同的过滤器（蔬菜、水果等）过滤每个实例。

在您的 food-list-component 中将过滤器属性定义为 @Input。然后将所需的过滤器传递给 html.

中的每个实例

export class FoodListComponent implements OnInit {

  @Input() filter: string;

  constructor() { }

  ngOnInit() {
    // Fetch items to be displayed in list
    // Filter the list using `filter`
  }

}

然后你可以修改你的html让每个实例都通过过滤器

<h1>Vegetables</h1>
<food-list-component filter="vegetables"></food-list-component>

<h1>Fruit</h1>
<food-list-component filter="fruits"></food-list-component>

<h1>Sweets</h1>
<food-list-component filter="sweets"></food-list-component>

Angular7：如何不点击调用方法？

Angular 7: How to call a method without clicking?

filter

angular-template

angular-components

angular