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

我希望能够根据在导航栏中单击的导航 link，更改驻留在表单中的搜索条件。换句话说，假设有人点击了按价格搜索，上面的组件现在应该更新为包含两个文本框，为他们想要搜索的价格范围提供服务。

table 布局将保持不变，因此这是组件的可重用部分。

你是如何在 Angular 6 中做到这一点的？

Answer 1

我会做几个 "templates"。每个模板都会根据不同的标准有不同的输入框。假设您在导航中单击 "color"，然后我将显示该模板，其中包含一个输入框，您可以在其中输入颜色名称。然后是价格的另一个模板，您可以像以前一样在其中放置 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>

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

希望对您有所帮助！

Answer 2

您可以使用 route parameter. See this stackblitz 为演示指定搜索条件。

在组件路由中添加一个search参数：

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

为每个路由器添加适当的参数link:

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

在 Angular 6 中重新使用组件 html

Re-using component html in Angular 6

angular-cli

angular-components

angular

angular-cli-v6