如何访问和处理@ViewChildren？

Question

I have below hierarchy of components:

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>

On Submit, I have to access product-rating component and depending on rating have to change the color of corresponding product component. What is the best way to access and process this?

Demo.component.ts

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

product.component.ts

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

Is there any better way to access product-rating component?

Any help would be appreciated.

Answer 1

Even though you have what looks like a relatively complex component structure, you can still achieve what you want to with standard @Output and @Input events and properties.

Your starting point is to decide which component is "controlling" everything. In your case it's the demo component. Demo component is deciding what the component hierarchy is. Next you need to work out the desired flow of data. In your case, it will look a bit like this:

product-rating -> demo -> product

A rating is determined by product-rating , and needs to get to product via the controller.

So you need to add an @Output event to product rating that the control can subscribe to:

@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);
}

So now the demo component can handle the rating change events and send it to the product:

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;
}