angular - 如何将具有非纯函数的大型组件类（1300+ 行）划分为多个打字稿文件

Question

我们的项目包含 2-3 个大型有状态组件，有时跟踪/保持清洁并订购所有定义的功能并不是最有趣的。从其他文件导入助手（纯函数）不是问题，但是我们的一些较大的函数直接作用于保存在所述组件类中的状态和变量。我们将这些状态/对象保存在它们各自的组件中而不是服务中，因为它们可能会变得非常庞大并且不会在应用程序范围内使用，它们仅限于它们自己的实例。我们如何将它们移动到单独的文件中，以便它们的行为方式有点类似于：

（为了说明，功能被简化和缩短）

a.component.ts

import { Component, OnInit } from '@angular/core';
import * as L from 'leaflet';
import { B } from './a.b.ts';

@Component({
  selector: 'app-a',
  templateUrl: './a.component.html',
  styleUrls: ['./a.component.scss']
})
export class AComponent implements OnInit {

    constructor(private b: B) {}

    map: L.Map;

    ngOnInit() {
        this.map = new L.Map(...);
    }
    onUploaded(...) {
        this.b.loadAssets();
    }
}

绝对值

import { AComponent } from './a.component.ts';

export class B extends AComponent {
    loadAssets() {
        ...
        ...addTo.(this.map)
        this.map.flyTo(...)
    }
}

^ 这会引发以下错误：angular Cannot access AComponent before initialization

Angular 的文档指出DI 中的依赖项不一定必须是服务，也可以是函数，但我找不到任何示例说明如何实现这一点，我不确定这是否是我们需要的. 非常欢迎任何帮助！

标签： angulartypescriptfunctiondependency-injectionextends