如何在不使用角度 6 的选择器的情况下传递数据

Question

Here i am using two component
1) product-filter.component (sorting product based on price)
2) products.component (all product page)

product-filter.component.html

<mat-expansion-panel expanded>
    <mat-expansion-panel-header>
        <mat-panel-title>
            <h4>Price</h4>
        </mat-panel-title>
    </mat-expansion-panel-header>
    <div fxLayout="row" fxLayoutAlign="space-between center" class="text-muted">
        <span>From: <b>${{matslider1.value}}</b></span>
        <span>To: <b>${{matslider2.value}}</b></span>
    </div>
    <div fxLayout="row" fxLayoutAlign="space-between center" class="filter-price">
        <mat-slider color="primary" min="0" max="500" step="10" #matslider1 (input)="startPrice($event.value)"></mat-slider>
        <mat-slider color="warn" min="0" max="1000" step="10" #matslider2 (input)="endPrice($event.value)"></mat-slider>
    </div>
</mat-expansion-panel>

product-filter.component.ts

   // ####################  Shorting  Start price ############################
      startPrice(event: any) {
          this.fromPrice = event;
          if (this.fromPrice == 0 && this.toPrice == 0) {
              this.pricesorting = this.products

          }
          else if (this.toPrice != 0) {
              if (this.ml != 0) {
                  var sorting = [];
                  for (let i = 0; i < this.sortingdata.length; i++) {
                      if (this.sortingdata[i]['newPrice'][0]['newPrice'] >= this.fromPrice && this.sortingdata[i]['newPrice'][0]['newPrice'] <= this.toPrice) {
                          sorting.push(this.pricesorting[i]);
                      }
                  }
                  this.pricesorting = sorting;
              } else {
                  this.pricesorting = [];
                  for (let i = 0; i < this.products.length; i++) {
                      if (this.products[i]['newPrice'][0]['newPrice'] >= this.fromPrice && this.products[i]['newPrice'][0]['newPrice'] <= this.toPrice) {
                          this.pricesorting.push(this.products[i])

                      }
                  }
              }

          }
          else if (this.toPrice == 0) {
              this.pricesorting = [];
              for (let i = 0; i < this.products.length; i++) {
                  if (this.products[i]['newPrice'][0]['newPrice'] >= this.fromPrice) {
                      this.pricesorting.push(this.products[i])
                  }
              }

          }
          console.log(this.pricesorting)

      }

      // ####################  Shorting  Ending price ############################
      endPrice(event: any) {
          this.toPrice = event;
          if (this.fromPrice > 0 && this.toPrice == 0) {
              var sorting = []
              for (let i = 0; i < this.products.length; i++) {
                  if (this.products[i]['newPrice'][0]['newPrice'] >= this.fromPrice) {
                      sorting.push(this.products[i]);
                  }
              }
              this.pricesorting = sorting;
          }
          else if (this.fromPrice == 0 && this.toPrice == 0) {
              this.pricesorting = this.products
          }
          else if (this.ml != 0) {
              var sorting = []
              for (let i = 0; i < this.sortingdata.length; i++) {
                  if (this.sortingdata[i]['newPrice'][0]['newPrice'] >= this.fromPrice && this.sortingdata[i]['newPrice'][0]['newPrice'] <= this.toPrice) {
                      sorting.push(this.sortingdata[i]);
                  }
              }
              this.pricesorting = sorting;
          } else {
              this.pricesorting = []
              for (let i = 0; i < this.products.length; i++) {
                  if (this.products[i]['newPrice'][0]['newPrice'] >= this.fromPrice && this.products[i]['newPrice'][0]['newPrice'] <= this.toPrice) {
                      this.pricesorting.push(this.products[i])
                  }
              }
          }
          this.buttondata = this.pricesorting;
        //   console.log(this.pricesorting)
      }

products.component.html

<mat-sidenav-container>
    <mat-sidenav #sidenav [opened]="sidenavOpen" [mode]="sidenavOpen ? 'side' : 'over'" class="filter-sidenav"
        perfectScrollbar>
        <mat-accordion displayMode="flat" multi="true">
            <!-------------------- Price range ---------------------->
            <app-price-filter></app-price-filter>
            <!-------------------- Price range ends ---------------------->
        </mat-accordion>
    </mat-sidenav>
    <mat-sidenav-content class="all-products" ngClass.gt-sm="p-left">
        <div *ngIf="pricesorting.length == 0">
            <h1 class="py-1 text-muted lh" style="    text-align: center;"> No Result Found .</h1>
        </div>
        <div *ngIf="pricesorting.length != 0">
            <div *ngIf="viewType == 'grid'" fxLayout="row wrap" class="products-wrapper">
                <div *ngFor="let product of pricesorting | paginate: { itemsPerPage: count, currentPage: page }" fxFlex="100"
                    [fxFlex.gt-sm]="viewCol" fxFlex.sm="50" class="col">
                    <mat-card class="product-item text-center hover-border">
                        <mat-chip-list *ngIf="product.discount != 0">
                            <mat-chip color="warn" selected="true">{{product.discount}}% OFF</mat-chip>
                        </mat-chip-list>
                        <a [routerLink]="['/products/single', product.productId]" class="image-link">
                            <img [src]="imageHost + product.images[0].medium" alt="">
                        </a>
                        <h4 class="category text-muted">{{ ( appService.Data.categories | filterById :
                            product.categoryId )?.name }}</h4>
                        <a [routerLink]="['/products/single', product.productId]" class="title text-truncate">
                            {{product.name}}
                        </a>
                        <div fxLayout="row" fxLayoutAlign="space-between center" class="prices">
                            <div fxLayout="column" fxLayoutAlign="center start">
                                <!-- <p class="old-price text-muted"><span *ngIf="product.oldPrice">${{product.oldPrice[0].oldPrice | number : '1.2-2'}}</span></p> -->
                                <p class="new-price">${{product.newPrice[0].newPrice | number : '1.2-2'}}</p>
                            </div>
                            <app-rating [ratingsCount]="product.ratingsCount" [ratingsValue]="product.ratingsValue"
                                [direction]="'column'"></app-rating>
                        </div>
                        <div class="divider mt-2"></div>
                        <div class="icons">
                            <app-controls [product]="product" (onOpenProductDialog)="openProductDialog(product)"></app-controls>
                        </div>
                    </mat-card>
                </div>
            </div>
        </div>
    </mat-sidenav-content>
</mat-sidenav-container>  

in this component i am able to get the products based on price sorting in console am getting it. i want to pass this this.pricesorting to products.component.html so please tell me how to do this

Answer 1

In product-filter.component.ts , you can emit an event using Event.Emitter().

public priceData = new EventEmitter<any>(null);
this.priceData.emit(this.pricesorting);

products.component.html

<app-price-filter (priceData)="handlePriceData($event)"></app-price-filter>

products.component.ts

handlePriceData(price){
   console.log(price);
}