Question

我想创建baseComponent以便使用所有现有的组件来继承它。现在，我想将服务注入baseComponent的最佳方法，对此我有两个解决方案。首先：将ctor服务发送到超级组件，如下面的代码所示，这种方式导致更改主体和方法中所有子组件。但是这种方式才能正常工作

IService.ts

df = pd.DataFrame({'class': np.random.choice(['A', 'B'], 100), 
               'value': np.random.random_sample(100)})
df['dataset'] = pd.DataFrame(df.groupby('class').apply(lambda x: 
pd.cut(x['value'], 10, labels=range(0, 10)))).reset_index(0, drop=True)

ICrudService.ts

    export interface IService {}

BaseComponent.ts

    export interface ICrudService extends IService {
    getById(id: any): Promise<any>;
    getList(): Promise<any>;
    getListByParam(fields?: Array<string>,rel?: Array<ItemRelValue>,statePaging?: State,filterSingle?: Array<any>,extraParams?: any,groups?: Array<any>): Promise<any>;
    update(item: any): Promise<any>;
    remove(id: any): Promise<any>;
    add(item: any): Promise<any>;
    }

和继承的组件之一

    export abstract class BaseComponent{
      public gridData: any = {  };
      public state: State = {  };
      protected param: Array<string> = [];
      protected rel: Array<ItemRelValue> = [];
      protected filter: Array<any> = [];
      protected groups: Array<Group> = [];
      protected aggregate: Array<Aggregate> = [];

      constructor(public title: Title,public router: Router,public toaster?: ToasterService,public service:IService) {   }

      protected getDataByParam() {
        this.service
               .getListByParam(this.param,this.rel,this.state,this.filter,null,this.groups)
          .then(response => {
            if (response.total) {
              this.gridData.total = Number(response.total);
            }
            response.data.forEach((item, index) => {
              this.rowReview(item);
              item.rowNumber = rowNumber++;
              this.gridData.data.push(item);
            });
          })
          .catch(error => {
            this.toaster.popAsync("error", "خطا", error.message);
          });
      }

      protected abstract rowReview(item?);
      // Todo: chane top review response

      public exportToExcel = (): Promise<any> => {
        return this.service
                  .getListByParam(this.param,this.rel,this.state,this.filter,null,this.groups      )
          .then(response => {
            response.data.forEach((item, index) => {
              this.rowReview(item);
              item.rowNumber = index + 1;
            });
            return Promise.resolve(response);
          })
          .catch(error => {
            this.toaster.popAsync("error", "خطا", error.message);
            return Promise.reject({});
          });
      };
    }

第二种方式：我想使用通用模式或减少项目更改的最佳方法，从通用模式（如类型（我对此模型不满意））发送服务，如下面的代码

导出类EducationalPostComponent扩展了Base2 { // endregion

BaseComponent.ts

    export class EducationalPostComponent extends BaseComponent {

      constructor(
        public title: Title,
        public router: Router,
        public toaster: ToasterService,
        private fb: FormBuilder,
        private postsService: PostsService
      ) {
        super(title, router, toaster,postsService);
        }
    }

}

和继承的组件之一

    export abstract class BaseComponent<T>{
      ...
      public service :any={} as T;
      constructor(
        public title: Title,
        public router: Router,
       public toaster?: ToasterService,
       ) {
       }
       ...

但是这种方式不起作用，并且在运行时出错。

我很困惑。动态注入服务的最佳方法以及如何在parentComponent中工作。

如何从继承的组件向基本组件注入或发送服务

0 个答案: