Question

我有一个评分关键组件（线性）

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

如果我要创建2个新组件（线性弯曲和错误），那么我将有3次几乎相同的表单逻辑/视图模型逻辑。

然后 3个公式之间的html 差异是：

2个下拉式公式＆＃39; 线性与弯曲＆＃39;和错误＆＃39;公式与＆＃39;线性＆＃39;相同。具有不同标签的错误表格＆＃39;错误＆＃39;而不是＆＃39;得分＆＃39;

你会为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

我希望有帮助

在角度2中具有多个非常相似的组件的逻辑的最大重用

1 个答案: