Повторное использование компонента html в Angular 6 - PullRequest
Новая
       11

Повторное использование компонента html в Angular 6

0 голосов
/ 19 мая 2018

У меня есть следующий шаблон компонента: 

<h1>Complexus Vehicle Inventory</h1>

<p *ngIf="!vehicles"><em>No vehicle entries found</em></p>

<div *ngIf="vehicles">
  <form class="form-inline my-2 my-lg-0">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" [(ngModel)]="strMakeOrModel" name="search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit" (click)="searchVehicle()">Search</button>
  </form>
</div>


<table class="table" *ngIf="vehicles">
    <thead class="thead-dark">
      <tr>
        <th scope="col">Make</th>
        <th scope="col">Model</th>
        <th scope="col">Engine Capacity</th>
        <th scope="col">Cylinder Variant</th>
        <th scope="col">Top Speed</th>
        <th scope="col">Price (R)</th>
        <th scope="col">Cylinder Capacity</th>
        <th scope="col">Air Pressure/second</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let vehicle of vehicles">
        <td>{{ vehicle.Make }}</td>
        <td>{{ vehicle.Model }}</td>
        <td>{{ vehicle.EngineCapacity }}</td>
        <td>{{ vehicle.CylinderVariant }}</td>
        <td>{{ vehicle.TopSpeed }}</td>
        <td>{{ vehicle.Price }}</td>
        <td>{{ vehicle.IndividualCylinderCapacity }}</td>
        <td>{{ vehicle.AirPressurePerSecond }}</td>
      </tr>
    </tbody>
  </table>

Я хочу иметь возможность, основываясь на навигационной ссылке, нажатой на панели навигации, изменить критерии поиска, находящиеся в форме.Другими словами, скажем, кто-то нажал кнопку Поиск по цене, вышеупомянутый компонент должен быть обновлен, чтобы теперь включить два текстовых поля, обслуживая диапазон цен, который они хотели бы найти.

Макет таблицы останется прежним,так что это повторно используемая часть компонента.

Как вам этого добиться в Angular 6?

Ответы [ 2 ]

0 голосов
/ 19 мая 2018

Вы можете указать критерий поиска с помощью параметра маршрута .См. этот стек для демонстрации.

  1. Добавление параметра search в маршрут компонента: 
{ path: "vehicles/:search", component: VehiclesComponent }
Добавьте соответствующий параметр для каждой ссылки на маршрутизатор: 
<a routerLinkActive="active" routerLink="/vehicles/make">Search: make</a> |
<a routerLinkActive="active" routerLink="/vehicles/model">Search: model</a> |
<a routerLinkActive="active" routerLink="/vehicles/price">Search: price</a> |
Получить критерий поиска из активного маршрута: 
import { ActivatedRoute } from '@angular/router';
import { Subscription } from "rxjs";
...

export class VehiclesComponent {
  search: number;
  private subscription: Subscription;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.subscription = this.route.params.subscribe(params => {
      this.search= params["search"];
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}
Адаптируйте представление к выбранному критерию поиска, например, с помощью директивы ngSwitch: 
<form>
  ...
  <ng-container [ngSwitch]="search">
    <div *ngSwitchCase="'make'">
      <div><input type="radio" name="make">Make 1</div>
      <div><input type="radio" name="make">Make 2</div>
      <div><input type="radio" name="make">Make 3</div>
    </div>
    <div *ngSwitchCase="'model'">
      <select>
        <option>Model 1</option>
        <option>Model 2</option>
        <option>Model 3</option>
      </select>
    </div>
    <div *ngSwitchCase="'price'">
      From: <input type="text">
      To: <input type="text">
    </div>
  </ng-container>
  <button>Search</button>
</form>
...
0 голосов
/ 19 мая 2018

Я бы сделал пару "шаблонов".Каждый шаблон будет иметь разные поля ввода на основе разных критериев.Допустим, вы нажали в навигации на «цвет», тогда я бы отобразил этот шаблон с одним полем ввода, где вы можете поставить название цвета.А затем еще один шаблон для цены, где вы бы поместили 2 поля ввода для низкой и высокой цены, как вы сделали.Например: 

<div *ngIf="choosed == 'color'">
    <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Color" 
         aria-label="Color" [(ngModel)]="color" name="color">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit" 
      (click)="searchVehicle()">Search</button>
    </form>
</div>

<div *ngIf="choosed == 'price'">
    <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="text" placeholder="low_price" 
         aria-label="Low Price" [(ngModel)]="low_price" name="low_price">
         <input class="form-control mr-sm-2" type="text" placeholder="high_price" 
         aria-label="High Price" [(ngModel)]="high_price" name="high_price">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit" 
      (click)="searchVehicle()">Search</button>
    </form>
</div>

И затем, когда вы нажимаете на панель навигации или какую-либо кнопку, я вызываю метод, который устанавливает выбранную переменную в цвет или цену, и шаблон будет отображаться на основе содержимого переменной!

Надеюсь, это поможет!

...