在 Angular 6 中重用组件 html

Question

我有以下组件模板：

<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 中实现这一点？

Answer 1

您可以使用route parameter 指定搜索条件。请参阅 this stackblitz 了解演示。

1. 在组件路由中添加search参数：

{ path: "vehicles/:search", component: VehiclesComponent }

1. 为每个路由器链路添加适当的参数：

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

1. 从活动路由中检索搜索条件：

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

4. 使视图适应选定的搜索条件，例如使用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>
...

Answer 2

我会制作几个“模板”。每个模板都会根据不同的标准有不同的输入框。假设您在导航中单击“颜色”，然后我将使用一个输入框显示该模板，您可以在其中输入颜色名称。然后是价格的另一个模板，您可以在其中放置 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>

然后当您单击导航栏或某个按钮时，我会调用一个方法 将所选变量设置为颜色或价格，模板将根据变量内容显示自己！

希望对你有帮助！