использование одного и того же компонента с другим состоянием в качестве дочернего в нескольких компонентах угловых 6/7

Question

У меня есть один компонент ErrorComponent, который я добавляю в два компонента.1 является родительским, а другой - его дочерним.Проблема в том, что оба компонента имеют один и тот же экземпляр.поэтому всякий раз, когда я хочу отобразить ошибку только в родительском компоненте, она также отображается в дочернем компоненте, и наоборот.

Я хочу сохранить оба компонента ошибок как разные экземпляры.пожалуйста помоги.заранее спасибо.

Вы можете поиграть с кодом здесь https://stackblitz.com/edit/angular-21woxg?file=src%2Findex.html

Answer 1

Это не будет возможно с той реализацией, которая у вас есть на данный момент.Причина в том, что ErrorComponent используется в шаблонах как ParentComponent, так и ChildComponent.И у вас нет какой-либо логики, которая условно отображает ErrorComponent в шаблоне либо ParentComponent, либо ChildComponent.

При этом, чтобы сделать эту работу, вы будетенеобходимо сделать следующее:

1. Отправьте в службу перехвата поле, определяющее, где должно отображаться сообщение об ошибке (showOn в примере)
2. Сделайте ErrorComponent тупой компонент.Просто позвольте ему принять errors как @Input.
3. . В ваших ParentComponent и ChildComponent введите NotifyService в качестве зависимости и подпишитесь на errorNotifications.Поскольку мы устанавливаем свойство showOn из службы перехватчиков, объект ошибки, который получат эти две подписки, также будет иметь это свойство showOn.
4. На основании этого вы можете установить displayErrorсобственность на ParentComponent и ChildComponent.Затем вы также можете использовать это для *ngIf для условного отображения ErrorComponent.

---

Вот Рабочий образец StackBlitz для вашегоисх.

Answer 2

Что вы можете сделать, это предоставить вещи, которые вы хотите, чтобы они были динамическими для вашего компонента в качестве входных данных, тогда вы сможете иметь другое состояние для вашего компонента Error, например, если вы хотите настроить сообщение об ошибке вваш error-component.ts вы добавляете:

export class ErrorComponent  {
  @Input()ErrorMessage='default error'
}

Тогда в вашем parent-component.html

<my-error-component [ErrorMessage]="http failure .."> </my-error-component>

и в вашем child-component.html

<my-error-component [ErrorMessage]="No internet connection .."> </my-error-component>