Question

我的组件层次结构如下：

product-list.component.ts

<product-list>  

    <ng-content></ng-content>

</product-list>

product.component.ts

<product>   

    <ng-content></ng-content>

</product>

Demo.component.ts

       <product-list>

                <product>

                    <product-rating></product-rating>

                </product>

        </product-list>

        <button label="Submit" (click)="submit()"></button>

在提交时，我必须访问产品评分组件，并且根据评分必须更改相应的产品组件的颜色。访问和处理此内容的最佳方法是什么？

Demo.component.ts

@ViewChildren(ProductRatingComponent) ratings: QueryList<ProductRatingComponent>;

product.component.ts

@ViewChildren(ProductRatingComponent) ratings: QueryList<ProductRatingComponent>;

是否有更好的方法来访问产品评级组件？

任何帮助将不胜感激。

Answer 1

即使您具有看起来相对复杂的组件结构，也可以使用标准的@Output和@Input事件和属性来实现所需的目标。

您的出发点是确定哪个组件“控制”了一切。在您的情况下，它是演示组件。演示组件正在确定什么是组件层次结构。接下来，您需要计算所需的数据流。在您的情况下，它将看起来像这样：

产品评分->演示->产品

等级由product-rating确定，需要通过控制器达到product。

因此，您需要向控件可以订阅的产品评分添加@Output事件：

@Output() ratingChange: EventEmitter<number> = new EventEmitter<number>();

// this is some event handler that handles the user-driven rating change
onRatingChange(): void {
  // Emit the rating. I am guessing here that the rating is stored in some property
  // It might come into this function as an event arg - that's up to your design.
  this.ratingChange.emit(this.rating);
}

因此，演示组件现在可以处理评级更改事件并将其发送到产品：

demo.component.html

<product [rating]="rating">
  <product-rating (ratingChange)="onRatingChange($event)"></product-rating>
</product>

demo.component.ts

rating: number;

onRatingChange(rating: number): void {
  this.rating = rating;
}

如何访问和处理@ViewChildren？

1 个答案: