Angular 具有动态嵌套组件的角度循环依赖关系

我在互联网上到处寻找解决方案，但都没有结果（不同的情况等），所以请原谅下面的代码转储，我遇到的问题是循环依赖。代码转储用于提供上下文

旁注：我对Angular和Typescript相当陌生

概念 当然，我正在尝试构建一组嵌套组件，这些组件都扩展了一个基类以简化编码。这些组件可以包含彼此的任何子组件。要加载子组件，基类使用一个指令，该指令需要决定在其位置加载哪个组件。最好的例子是考虑嵌套

和

块

这是我的密码：

指令

指令.ts

调用

load（）

时加载其各自的组件

import { ComponentFactoryResolver, Directive, ViewContainerRef } from '@angular/core';

import { DivComponent } from './div'; // < -- Part of the dependency issues
import { SectionComponent } from './section'; // < -- Part of the dependency issues

@Directive({
    selector: '[child-node]',
})
export class ChildNodeDirective {

    @Input() type: string;
    @Input() content: any;

    constructor(
        private container: ViewContainerRef,
        private resolver: ComponentFactoryResolver,
    ){}

    load(): void {

        let component: Type<any>;

        switch (this.type) {
            case 'div' : component = DivComponent; break;
            case 'section' : component = SectionComponent; break;
        }

        if (component) {
            const factory = this.resolver.resolveComponentFactory(component);
            const componentRef = this.container.createComponent(factory);
            componentRef.instance.content = this.content;
        }

    }

}

div组件

div.ts

该组件扩展了基础并简单地渲染其子节点

import { Component } from '@angular/core';
import { Base } from './base'; // < -- Part of the dependency issues

@Component({
    selector: 'custom-div',
    templateUrl: './div.html',
})
export class DivComponent extends Base {

    public textContent: string;

    set content(content: any) {

        super.content = content;

        this.textContent = content.text;

    }

}

---

TL；博士解决了这个问题 所有这些似乎都奏效了。我能够生成各种内容和子对象的深层嵌套等。我不能说代码/实现的“正确性”，但我唯一的问题是循环依赖性警告

WARNING in Circular dependency detected:
div.ts -> base.ts -> directive.ts -> div.ts

WARNING in Circular dependency detected:
section.ts -> base.ts -> directive.ts -> section.ts

请帮我摆脱它们

解决方案 根据Kai最后的建议，我创建了一个decorator来收集元数据，以便在指令中使用

指令ts的变化

export const HtmlElementMap: {component: Type<any>, map: string[]}[] = [];

export function HtmlComponent(config: {map: string[]}) {
    return (target: Type<any>) => {
        ElementMap.push({component: target, map: config.map});
    };
}

@Directive({
    selector: '[child-node]',
})
export class ChildNodeDirective {

    ...

    load(): void {

        let component: Type<any>;

        HtmlElementMap
          .filter(v => v.map.indexOf(this.type) > -1)
          .forEach(
              v => {
                  if (undefined === component) {
                      component = v.component;
                  }
              }
          );

        if (component) {
            const factory = this.resolver.resolveComponentFactory(component);
            const componentRef = this.container.createComponent(factory);
            componentRef.instance.content = this.content;
        }

    }

}

---

在我看来，图表中的红线是这里的问题所在。因此，如果在运行时注册组件（需要switch语句），则可以尝试解决并删除此依赖关系。例如，

Base

类可以收集所有可用组件并将它们传递给

ChildNodeDirective

类。或者您可以使用服务来注册它们。如果你有一个工作stackblitz样本，我们可以帮助你的代码

---

我喜欢你的图片XD，所以你建议在section/div register self的构造上创建一个提供者，然后在指令中获得相同的提供者来访问地图？我会试试看，如果行得通，我会标为正确。我没想到。。。你是个英雄@完全正确。这可能不是最干净的解决方案，但对我来说听起来还不错，目前我想不出更好的解决方案了。@kai我也非常喜欢这张图片。你用什么来创建它？@Fab2谢谢，我用awsome开源工具@kai创建了它。我用新的一期更新了我的问题，我们就快到了。如何应对未构建的注册表？

WARNING in Circular dependency detected:
div.ts -> base.ts -> directive.ts -> div.ts

WARNING in Circular dependency detected:
section.ts -> base.ts -> directive.ts -> section.ts

export const HtmlElementMap: {component: Type<any>, map: string[]}[] = [];

export function HtmlComponent(config: {map: string[]}) {
    return (target: Type<any>) => {
        ElementMap.push({component: target, map: config.map});
    };
}

@Directive({
    selector: '[child-node]',
})
export class ChildNodeDirective {

    ...

    load(): void {

        let component: Type<any>;

        HtmlElementMap
          .filter(v => v.map.indexOf(this.type) > -1)
          .forEach(
              v => {
                  if (undefined === component) {
                      component = v.component;
                  }
              }
          );

        if (component) {
            const factory = this.resolver.resolveComponentFactory(component);
            const componentRef = this.container.createComponent(factory);
            componentRef.instance.content = this.content;
        }

    }

}

@HtmlComponent({map: ['div']})
@Component({
    selector: 'custom-div',
    templateUrl: './div.html',
})
export class DivComponent extends Base {

    ...

}