Angular - служебные данные не передаются между компонентами - PullRequest
Новая
       2

Angular - служебные данные не передаются между компонентами

0 голосов
/ 11 апреля 2020

Я прихожу к вам в полном отчаянии ... С 1 дня я пытаюсь передать данные между моими двумя компонентами, используя сервис.

Я уже использую этот сервис в другом приложении и знаю, что это работа

Но я попробовал все, что нашел с помощью Google: BehaviorSubject, Subject ... Но в моем случае ничего не работает: значение изменяется в службе благодаря первому компоненту, но ничего происходит во втором компоненте, даже если бы я подписался на значение в сервисе.

Второй компонент получает значение в init, но ничего после ...

Полезно знать: Второй компонент является родителем первого компонента.

Это мой код (на самом деле):

GlobalFn.Service: 

import { Injectable } from '@angular/core'
import { Observable, Subject, BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class globalFnService{
    id:any;
    activeDeepView = new Subject<boolean>();
    constructor() { 
      this.activeDeepView.next(false);
     }

    deepView(){
      this.activeDeepView.next(!this.activeDeepView);
    }

    getValue(): Observable<any> {
        return this.activeDeepView.asObservable();
    }

}

Первый компонент (дочерний): 

import { Component, OnInit } from '@angular/core';
import { globalFnService } from '../services/globalFn.service';

@Component({
  selector: 'app-profil',
  templateUrl: './profil.component.html',
  styleUrls: ['./profil.component.scss'],
  providers: [globalFnService]
})
export class ProfilComponent implements OnInit {

  constructor(
    private globalFn:globalFnService
  ) { 

   }

  deepView(){
    this.globalFn.deepView();
    console.log("clicked !");
  }

  ngOnInit() {
    this.globalFn.getValue().subscribe(value => {
      if(value == true){
        console.log("status",value);
      } else {
        console.log("status",value);
      }
    })
  }

}

Второй компонент (родительский): 

import { Component, OnInit } from '@angular/core';
import { globalFnService } from '../services/globalFn.service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss']
})
export class HomeComponent implements OnInit {



  constructor(
    private globalFn:globalFnService
  ) { 
    this.subscription = this.globalFn.getValue().subscribe(value => {
      if(value == true){
        console.log("status",value);
      } else {
        console.log("status",value);
      }
    }) 
   }

}

Если вы обнаружите, где я совершил ошибку, вы способны спасти мой день ...

Спасибо!

Ответы [ 2 ]

1 голос
/ 11 апреля 2020

При совместном использовании данных между компонентами все, что вам нужно, - это создать службу и зарегистрировать ее в родительском модуле (который будет работать как одноэлементный экземпляр), чтобы он был доступен для всех компонентов:

Изменения, которые необходимо применить:

app.module.ts: 

import { globalFnService } from '../services/globalFn.service'; // imports

providers: [
   ...,
   globalFnService
]

Нет необходимости добавлять ссылку на любые другие места: (в массиве поставщика другого компонента).

1 голос
/ 11 апреля 2020

Когда вы вводите providers: [globalFnService], вы говорите Angular создать экземпляр fre sh globalFnService и внедрить его в компонент, а не внедрить существующий экземпляр службы. Удалите это из компонента, и оно должно работать.

...