1. 首页
  2. 问题列表
  3. 以角扩展组件和视图
提问者：小点点

以角扩展组件和视图


我说的是关于Angular 11的工作。问题很简单。但我找不到任何答案。我尝试在Angular中使用OOP概念。我有一个超过20个字段的基本接口。

export interface IBaseOperator{
    type:EOperatorType;
    firstname:string;
    lastname:string;
    date:string;
    nic:string;
    // Other field are removed for easiness
}

此接口有6个子接口。我不显示所有的接口，但对于例如

export interface IStaff extends IBaseOperator{
    empId:string;
    // some other fields
}

export interface IContractor extends IBaseOperator{
    regId:string;
    joinedDate:string;
    // some other fields
}

当我在html中创建一个视图进行保存时，我需要创建所有

工作人员部分

this.operatorForm = this.fb.group({
      firstname: ['', Validators.required],             // IBaseOpertor
      lastname: ['', Validators.required],              // IBaseOpertor 
      date: ['', Validators.required],                  // IBaseOpertor
      nic: ['', Validators.required],                   // IBaseOpertor
      
      type:[EOperatorType.STAFF,Validators.required]    // IBaseOpertor
      empId: ['', Validators.required]                  // IStaff
    });

承包商部分

this.operatorForm = this.fb.group({
      firstname: ['', Validators.required],             // IBaseOpertor
      lastname: ['', Validators.required],              // IBaseOpertor 
      date: ['', Validators.required],                  // IBaseOpertor
      nic: ['', Validators.required],                   // IBaseOpertor
      
      type:[EOperatorType.CONTRACTOR,Validators.required]   // IBaseOpertor
      regId: ['', Validators.required]                  // IContractor 
      joinedDate: ['', Validators.required]             // IContractor 
    });

我在这里发现了一些问题

  1. 所有6个html文件和ts文件中的代码重复
  2. 如果我需要在IBaseoperator界面中更改，我需要在所有6个组件中更改。
  3. 浪费时间和无用的代码，因为代码是重复的。

我的问题是，是否可以在组件（html和ts）中使用继承？例如：是否可能有共同的

提前感谢。


共2个答案

匿名用户

常见的字段和方法通过扩展关键字继承

下面是一个示例，说明如何扩展formgroup，以便只需声明一次表单控件

export class ParentComponent {
  form:FormGroup
  date= ''

  commonfunction(){
    
  }
  constructor(protected fb: FormBuilder) {
    this.form = this.fb.group({
      date: ['', Validators.required],                  // IBaseOpertor
    })
  }
}

export class ChildComponent extends ParentComponent {
  //extends Parent component, so already has 'form' and 'date' properties
  firstname= ''
  lastname= ''
  nic= ''
  empId= ''

  constructor(protected fb: FormBuilder) {
    super(fb) //parentComponent constructor run
    this.commonfunction() //extended from parent
    this.form = this.fb.group({
      ...this.form.controls, //form already initialized because of the call to super()
      firstname: ['', Validators.required],             // IBaseOpertor
      lastname: ['', Validators.required],              // IBaseOpertor
      nic: ['', Validators.required],                   // IBaseOpertor
      empId: ['', Validators.required]                  // IStaff
    });
  }
}

在子组件中，form属性还具有“date”控件，因为上面使用了扩展语法（“…this.form.controls”）

匿名用户

因此，基本上您需要显示一个可编辑的表单。您可以为表单使用https://formly.dev/ui/material（或其他替代方案），并将不同的字段（除了一组常见的字段之外）作为输入传递给显示表单的通用组件。它是组合而不是继承——仍然非常面向对象。

相关问题