Получение свойств от неправильного компонента в CanDeactivateGuard

Question

Я следую за спецификацией компонента c can-deactivate.guard.ts пример, найденный здесь: https://angular.io/guide/router#candeactivate -handling-unsaved-changes

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

У меня есть контейнер с именем MessagesComponent и дочерний компонент с именем FormComponent. Я импортирую дочерний компонент в Guard так же, как в примере с CrisisDetailComponent. Моя проблема в том, что, когда я пытаюсь получить доступ к свойствам из FormComponent, мне доступны только те, которые на самом деле доступны мне или те, которые поступают из моего контейнера (MessagesComponent), которые я не импортирую в сторож. Как получить доступ к свойствам из моего дочернего компонента? Вот мой код:

охранник:

import { FormComponent } from '../components/form/form.component';
...

export class CanDeactivateGuard
    implements CanDeactivate<FormComponent> {
    constructor(
        public dialog: MatDialog,
    ) {}
    canDeactivate(
        component: FormComponent,
    ): Observable<boolean> | boolean {
        console.log('component', component);
        ...
    }
}

маршрутизация:

...
{
  path: 'messages',
  component: MessagesComponent,
  canDeactivate: [CanDeactivateGuard],
},
...

Все, что возвращается мой консольный журнал - это свойства MessagesComponent. Почему это происходит, когда я импортирую FormComponent?

Answer 1

На самом деле вы импортируете FormComponent как тип в CanDeactivateGuard. Но вы передаете Компонент Сообщения. Возможно, Angular может выдать ошибку, но этого не происходит.

Чтобы пояснить, я написал некоторый код.

    component: MessagesComponent, // this is the component which you're passing to canDeactivate
    canDeactivate: [CanDeactivateGuard], // you are passing the messages component to the canDeactivate method

    ...

    canDeactivate(
        component: FormComponent, // <- you have FormComponent as a type, but this method actually is receiving MessagesComponent
    )

Если вы хотите увидеть компонент формы в браузере консоль, вам нужно передать его.

    component: FormComponent,
    canDeactivate: [CanDeactivateGuard],

    ...

    canDeactivate(
        component: FormComponent, // <- now you can see your form component, and the type is useful to see all the properties and methods which form component has inside itself
    )

В вашем случае вы можете использовать дочерний декоратор view, чтобы получить дочерний компонент и использовать его в охране.

    export class MessagesComponent {
      @ViewChild(FormComponent) formComponent: FormComponent;
    }

    ...

    component: MessagesComponent,
    canDeactivate: [CanDeactivateGuard], 

    ...

    canDeactivate(
        component: MessagesComponent,
    ) {
      console.info('magic', component.formComponent);
    }