Angular 5 - связь между компонентами и сервисами

Question

Я использую Angular 5. Цель состоит в том, чтобы загрузить данные, когда вход в систему в порядке, и использовать эти данные в других компонентах. Данные загружаются с использованием класса Services с методом getActiveTasks и методом getStats. Компонент входа:

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {

  constructor(private auth: AuthenticationService,
              private klinckServices: KlinckServices,
              private router: Router) { }

  loadData($event) {
    console.log('Authentification OK');
    let success;
    this.klinckServices.getActiveTasks(this.auth.getEcmUsername())
      .then((webScriptdata) => {
          console.log('KlinckSercices - loadData');
          success = webScriptdata;
          this.klinckServices.listTasks = success.data as ActiveTask[];
          this.router.navigate([this.klinckServices.getStats()]);
          console.log(this.klinckServices.listServices);
        },
        msg => {
          alert(msg);
          return '';
        });
   // this.router.navigate([this.klinckServices.loadData()]);
  }
}

Класс обслуживания:

@Injectable()
export class KlinckServices {

  listTasks: ActiveTask[];
  listServices: Stats [] = [];

  constructor(private apiService: AlfrescoApiService,
              private auth: AuthenticationService) {
    console.log('KlinckServices - constructor');
  }
  getStats(): string {
    this.listTasks.forEach((item, index) => {
      if (this.getServicesInListTasks(item.properties.wfvd_nomService) !== null) {
        if (! this.getServicesInListServices(item.properties.wfvd_nomService)) {
          const listLength = this.listTasks.filter(item2 => item2.properties.wfvd_nomService === item.properties.wfvd_nomService).length;
          console.log(listLength);
          const at: ActiveTask[] = [];
          for (let i = 0; i < listLength; i++) {
            at.push(this.listTasks.filter(item2 => item2.properties.wfvd_nomService === item.properties.wfvd_nomService)[i]);
          }
          this.listServices.push({
            data: at,
            count: listLength,
            service: item.properties.wfvd_nomService
          });
        }
      }
    });
    return '/dashboard';
  }
  getServicesInListServices( serviceSearch: string) {
    return(this.listServices.find( x => x.service === serviceSearch));
  }
  getServicesInListTasks( serviceSearch: string) {
    return(this.listTasks.find( x => x.properties.wfvd_nomService === serviceSearch));
  }

Когда компонент панели мониторинга загружен, мне нужно получить эти данные:

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit, AfterViewInit 
{
  @ViewChild(DataTableDirective) datatableElement: DataTableDirective;
  @Input() public klinckServices: KlinckServices;

  listTasks: ActiveTask[];
  listPatients: Patient[];
  listMedecins: Medecin[];
  listDocType: Typologie[];
  listServices: Stats [] = [];
  dtOptions: any = {};
  docNodeId: string;
  detailTaskId: any;

  constructor(private auth: AuthenticationService,
              public dialog: MatDialog,
              private http: HttpClient) 
  {
    console.log('DashboardComponent - constructor');
    this.listServices = this.klinckServices.listServices;
    console.log(this.listServices);
    this.getPatients();
    this.getMedecins();
    this.getDocumentType();
  }

Но в консоли появляется следующее сообщение об ошибке: «ОШИБКА TypeError: Невозможно прочитать свойство listServices of undefined»

Итак, как лучше всего взаимодействовать между компонентами и сервисами?

Answer 1

Вы должны ввести сервис, как вы делаете в LoginComponent

constructor(private klinckServices: KlinckServices

И вы также должны предоставить его для модуля

providers: [KlinckServices]

Answer 2

Вы можете, например:

1. Используйте Singleton Service в Angular и загружайте данные один раз при входе в систему
2. Загружать данные не при входе в систему, а при инициализации Dashboard (метод OnInit, интерфейс которого используется в определении класса - и ofcors, вы должны внедрить свой KlinkService в конструкторе, чтобы использовать его в качестве @ CornelC , упомянутого в его ответе).

Дополнительный вопрос для вас: почему вы не используете Rxjs в своих сервисах (это стандартно для angualar) на KlinkService.getActiveTasks (потому что вы называете это обещанием)?