Круговая зависимость в Angular компонентах

Question

У меня есть два компонента, 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 есть кнопка, открывающая NewPersonComponent во вкладке, а в newPersonComponent есть кнопка, открывающая PersonListComponent в новой вкладке.

Answer 1

Согласно тому, что вы сказали в комментарии, у вас есть два решения:

1. Используйте диалоговое окно (Angular Материал) , например

. Метод 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>

Answer 2

В данном примере оба компонента должны иметь общего родителя.

Отправить событие вверх от одного из дочерних компонентов к родителю. Затем из родительского компонента вызовите функцию, чтобы открыть один из дочерних компонентов в новой вкладке.

Компонент 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);
    }
}