Поймать ошибки от дочерних компонентов. Пользовательский ErrorHandler. Не синглтон - PullRequest
Новая
       33

Поймать ошибки от дочерних компонентов. Пользовательский ErrorHandler. Не синглтон

0 голосов
/ 08 сентября 2018

Я оборачиваю содержимое своих компонентов в другой компонент, который предназначен для контроля состояния, например загрузка | редактирование | просмотр и т. д.

Я бы хотел отлавливать ошибки дочерних компонентов в таком компоненте упаковки.

почему бы это не сработало?

У меня есть заказ ErrorHandler

@Injectable()
export class DynamicStateErrorHandler implements ErrorHandler {
  constructor() {
    console.log('imhere');
  }
  handleError(error: any): void {
    alert(error);
  }
}

И я предоставляю это так: 

@Component({
  selector: 'app-dynamic-state',
  templateUrl: './dynamic-state.component.html',
  styleUrls: ['./dynamic-state.component.scss'],
  providers: [
    {
      provide: ErrorHandler,
      useClass: DynamicStateErrorHandler,
      multi: true
    }
  ]
})

Как я понял из руководства DI, мой пользовательский ErrorHandler должен быть доступен для всех детей app-dynamic-state по одному на экземпляр DynamicStateComponent

Я проверяю это так: 

...
@Component({
  selector: 'app-test-err-cmp',
  template: `
    <div></div>
  `,
})
class TestErrorComponent implements AfterViewInit {
  ngAfterViewInit() {
    throw new Error('test error');
  }
}

@Component({
  selector: 'app-test-cmp',
  template: `
    <app-dynamic-state [state]="state">
      <div class="test-content"></div>
      <ng-template *ngIf="testError" #editingTemplate>
        <app-test-err-cmp></app-test-err-cmp>
      </ng-template>
      <ng-template *ngIf="testTemplate" #viewingTemplate>
        <div class="test-viewing-template"></div>
      </ng-template>
    </app-dynamic-state>
  `,
})
class TestWrapperComponent implements OnInit {
  public testError: boolean;
  public testTemplate: boolean;
  public state: Observable<DynamicState>;
  public $state = new Subject<DynamicState>();
  ngOnInit() {
    this.state = this.$state.asObservable();
  }
}
...

it('should display internal errors', async(() => {
      hostFixture.componentInstance.testError = true;
      hostFixture.detectChanges();
      component.ngAfterContentInit();
      hostFixture.componentInstance.$state.next(ComponentDynamicStates.EDITING);
      expect(() => {
        hostFixture.detectChanges();
      }).toThrowError('test error');
      expect((<DebugElement>hostFixture.debugElement.childNodes[0]).query(By.css('app-error'))).toBeTruthy();
      expect(component.stateContext.err).toBeTruthy();
    }));

выдается ошибка, но мой handleError метод никогда не вызывается.

...