在 Angular 中重用组件答案

【问题标题】：Reusing components in Angular在 Angular 中重用组件
【发布时间】：2019-12-28 17:40:20
【问题描述】：

我有 3 种类型的对象：

A
 - FirstName
 - LastName
B
 - FirstName
 - LastName
 - MiddleName
C
 - FirstName

我需要使用一个简单的表单创建一个组件来创建这些对象，该表单允许我填写字段并发送请求。

对于每种类型，我都创建了一个组件：

a.component.ts:

@Component({
  selector: 'add-a-type',
  template: `
    <form [formGroup]="aForm">
  <div class="form-group">
    <label for="firstName">First Name</label>
    <input type="text" id="firstName" class="form-control" formControlName="firstName" />
  </div>

  <div class="form-group">
    <label for="lastName">Last Name</label>
    <input type="text" id="lastName" class="form-control" formControlName="lastName" />
  </div>

  <button type="button" class="btn btn-info" (click)="addA()" [disabled]="aForm.invalid">
    Add
  </button>
</form>
  `
})
export class AddAComponent implements OnInit {
  aForm: FormGroup;

  constructor(
  ) { }

  ngOnInit() {
    this.createAForm();
  }

  createAForm(): void {
    this.aForm = new FormGroup({
      firstName: new FormControl('', [Validators.required]),
      lastName: new FormControl(''),
    });
  }

  addA(): void {
    // code
  }
}

对于其余的组件，一切都将相同，只是反应式表单和模板本身会有所不同（会有更多或更少的字段）。告诉我在这种情况下如何避免重复？

【问题讨论】：

其他组件扩展的抽象 AddAComponent 怎么样？
遵循智能组件和哑组件的模式，使用transclusion /slots/<ng-content>来复用不同子模板的组件。

标签： angular angular6 angular7 angular-components angular8

【解决方案1】：

像这样创建一个组件FormComponent：

@Component({
  selector: 'app-form',
  template: `
    <form [formGroup]="form" (submit)="onSubmit()">
      <div class="form-group" *ngIf="firstName">
        <label for="firstName">First Name</label>
        <input
          type="text"
          id="firstName"
          class="form-control"
          formControlName="firstName"
        />
      </div>

      <div class="form-group" *ngIf="middleName">
        <label for="middleName">Middle Name</label>
        <input
          type="text"
          id="middleName"
          class="form-control"
          formControlName="middleName"
        />
      </div>

      <div class="form-group" *ngIf="lastName">
        <label for="lastName">Last Name</label>
        <input
          type="text"
          id="lastName"
          class="form-control"
          formControlName="lastName"
        />
      </div>

      <button
        type="button"
        class="btn btn-info"
        (click)="submitBtn()"
        [disabled]="form.invalid"
      >
        Add
      </button>
    </form>
  `
})
export class FormComponent implements OnInit {
  @Input() firstName: boolean;
  @Input() middleName: boolean;
  @Input() lastName: boolean;
  @Output() formSubmit = new EventEmitter<any>();

  public form: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      firstName: this.firstName ? new FormControl('', [Validators.required]) : undefined,
      middleName: this.middleName ? new FormControl('', [Validators.required]) : undefined,
      lastName: this.lastName ? new FormControl('', [Validators.required]) : undefined
    });
  }

  onSubmit() {
    if(this.form.valid) {
      this.formSubmit.emit(this.form.value);
    }
  }
}

然后在您的页面上使用它。例如，如果您只想要名字和姓氏：

<app-form (formSubmit)="onSubmit($event)" [firstName]="true" [lastName]="true"></app-form>

【讨论】：