Angular 组件中的循环依赖答案

【问题标题】：Circular Dependency in Angular ComponentsAngular 组件中的循环依赖
【发布时间】：2020-01-08 14:21:06
【问题描述】：

我有两个组件，AComponent 和 BComponent，以及一个使用这两个组件的服务：

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

    constructor(
        private tabService: TabService
    ) {
    }

    ngOnInit() {

    }
    openB()
    {
    tabService.openTab(BComponent);
    }

}

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

    constructor(
        private tabService: TabService
    ) {
    }

    ngOnInit() {

    }
    openA()
    {
    tabService.openTab(AComponent);
    }

}

问题出在警告以下这两个组件之间的循环依赖关系。在这种情况下如何避免循环依赖？

想象一下有 PersonListComponent 和 NewPersonComponent。在PersonListComponent里面有一个按钮在一个tab中打开NewPersonComponent，在newPersonComponent里面有一个按钮在一个新tab中打开PersonListComponent。

【问题讨论】：

openTab() 函数有什么作用？你为什么要传递整个组件？
openTab() 是一个通用函数，它获取一个组件并像谷歌浏览器标签一样将其打开到 dom 中......
为什么要通过组件 A 将组件 B 传递给服务？和组件 A 通过组件 B？您的应用程序中的层次结构是什么？让您的父组件通过组件 A 或 B？您还没有真正提供足够的信息，无法神奇地想出解决方案。
我不认为你可以用一个组件打开一个新选项卡，或者像你一样将一个组件插入到 DOM 中。 Angular 会重新加载 AppComponent，然后根据你的路由系统，决定加载哪个组件。你能提供你的路线吗？
想象一下有 PersonListComponent 和 NewPersonComponent。在PersonListComponent里面有一个按钮在一个选项卡中打开NewPersonComponent，在newPersonComponent里面有一个按钮在一个新选项卡中打开PersonListComponent。

标签： angular typescript oop circular-dependency

【解决方案1】：

鉴于示例，两个组件都应该有一个共同的父级。

从其中一个子组件向上发送事件到父组件。然后从父组件调用该函数以在新选项卡中打开其中一个子组件。

组件 A：

export class AComponent implements OnInit {
    Output() OpenB: EventEmitter<any> = new EventEmitter();
}

组件 B：

export class BComponent implements OnInit {
    Output() OpenA: EventEmitter<any> = new EventEmitter();
}

父 HTML：

<app-bcomponent (openA)="openComponent('A')"></app-bcomponent>
<app-acomponent (openB)="openComponent('B')"></app-acomponent>

父 ts：

openComponent(component) {
    if (component === 'A') {
        tabService.openTab(AComponent);
    } else if (component === 'B') {
        tabService.openTab(BComponent);
    }
}

【讨论】：

【解决方案2】：

根据您在评论中所说的，您有两种解决方案：

1.以对话框(Angular Material) 为例

createUser() 方法将打开一个对话框，显示一个创建新用户的表单。

这里我不能提供代码，展示Material Modal的工作原理太长了。

2。为 PersonList 制作一条路线，为 NewPerson 制作另一条路线

在您的路由文件中，编写如下内容：

const routes: Routes = [
  { path: 'persons', component: PersonListComponent },
  { path: 'create', component: NewPersonComponent },
]

然后在您的 html 文件中，您将能够制作：

<a routerLink="/create" routerLinkActive="active"> Add </a>

【讨论】：