angular - Angular 2 中具有多个非常相似的组件的逻辑的最大重用

Question

我有一个评分关键组件(线性)

现在我必须实现 2 个非常相似的公式或组件。

如果我创建 2 个新组件(linear with bend 和 errors)，那么我将拥有 3 倍几乎相同的表单逻辑/ View 模型逻辑。

那么 3 个公式 之间的 html 中的差异是:

公式“linear with bend”和“errors”公式中的 2 个下拉列表与“linear”公式相同，只是带有不同的标签“errors”而不是'分数'

为了最大限度地提高 html 和逻辑的可重用性，您会怎么做？

Answer 1

很简单，你只需要一个组件，用一个变量来区分三者。基于变量使用 *ngIf 显示 HTML 表单。

我不确定您希望如何设置变量，但您可以从以下代码开始:

app.html

<form action="">
        grade key type
        <select id="formular" [(ngModel)]="formular" name="formular">
                    <option value="linear">linear</option>
                    <option value="linear_with_bend">linear with bend</option>
                    <option value="errors">errors</option>
                    </select>
        <br> from score
        <input type="text" name="" value="">
        <br> worst grade
        <input type="text" name="" value="">
        <br> half scores count
        <input type="radio" name="score_count" value="Yes">
        <input type="radio" name="score_count" value="Nein">
        <br> set Grade as
        <select>
                    <option value="" selected>Quarter</option>
                    </select>
        <br>
        <div *ngIf="formular == 'linear_with_bend'">
            score at bend
            <select>
                    <option value="" selected> 10</option>
                    <option value=""></option>
                    </select>
            <br> grade at bend
            <select>
                    <option value="" selected>4.5</option>
                    <option value=""></option>
                </select>
        </div>
        <button>Refres</button>
        <br> selected formular: {{formular}}
    </form>

app.ts

import { Component, NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms';
@Component({
  selector: 'my-app',
  templateUrl: './app.html'
})
export class App {
  formular: string;
  constructor() {
    this.formular = 'linear';
  }
}

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [App],
  bootstrap: [App]
})
export class AppModule { }

这是一个 plunker

希望对你有帮助