Каковы все возможности передачи данных одного компонента другому компоненту без навигации или маршрута в угловом сценарии 2 типа?

Question

Я новичок в изучении сценария типа Angular 2. Я хочу передать данные между одним компонентом к другому компоненту?

Serives.ts

    import {Component, Injectable} from '@angular/core';

    // Name Service
    export interface myData {
       myDataname:any;
    }

    @Injectable()
    export class GetService { 
        sharingData:any={myDataname:"My data string"}; 

        saveData(str:any){
            alert("Save Data");
        // console.log('save data function called' + JSON.stringify(str));
        this.sharingData.myDataname=str; 
        console.log(JSON.stringify(this.sharingData.myDataname));
      }
      getData():any{
     console.log('get data function called');
     console.log(JSON.stringify(this.sharingData.myDataname)+ "Get dats service s");
        return this.sharingData.myDataname;
}
    }

Первый Component.ts

import { GetService } from '../service/get-service';

    @Component({
      selector: 'firstcomponent,
      templateUrl: 'firstcomponent.html',
      providers:[GetService]
    })

    export class firstcomponentDetails {
    firstname:string;
    lastname:string;

      constructor(public getservice: GetService ) {
         this.getservice= getservice;

    submitForm(value: any):void{
            console.log(' Personal Details Form submited!');
        console.log(value);
        this.getservice.saveData(value);
    }
}
    }

Второй Component.ts

 import { GetService } from '../service/get-service'; 
    @Component({
      selector: 'secondpage',
      templateUrl: 'secondpage.html',
       providers: [GetService],
    })
    export class SecondPage {
     getDatavaluesServices:any;
     constructor( public getservice:GetService){
    this.getservice = getservice;
     this.getDatavaluesServices=getservice.getData();
      console.log(this.getDatavaluesServices );
    }
    }

Это мой код Я попробовал этот код, передавая данные первого компонента во второй компонент. Я получаю строковое значение my data string, Как получить значение первого компонента?

Answer 1

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

import { StateService } from '../../../core/state.service';

  constructor(
    @Inject(StateService) private stateSrvc: StateService
  ) {}

Ваш сервис будет примерно таким:

@Injectable()
export class StateService {
    someStateValue: string;;
}

Таким образом, вы создаете одноэлементную службу, что означает, что во всем приложении будет один экземпляр службы, поэтому любые значения, заданные вами для одного компонента, могут быть получены из другого, что позволит вам передавать данные между компонентами без полагаться на передачу данных через URL и параметры маршрутизатора.

Как вы храните хранилище состояний в этой службе, зависит только от вас, вы можете просто объявить переменные, как указано выше, и получить и установить значения напрямую:

stateSrvc.someStateValue = 1234

или же

someLocalVariable = stateSrvc.someStateValue

Или вы можете настроить getVariable а также setVariable функции в службе, чтобы иметь больше контроля.

Вы также можете использовать Observables и Subjects или BehaviorSubjects для хранения состояния с помощью RxJS.

Answer 2

Вы должны предоставить услугу родительским компонентом или модулем, чтобы быть уверенным, что только один экземпляр является общим для компонентов. имеющий providers:[GetService] на дочерних компонентах воссоздайте службу, когда создается экземпляр компонента. Таким образом вы потеряете данные, установленные другим компонентом.

Если вы следовали руководству Родитель и дети общаются через службу, вы можете увидеть, что у дочерних компонентов нет поставщиков общей службы, на которой осуществляется связь, но есть родитель mission-control компонент обеспечивает только один экземпляр для каждого дочернего элемента, например my-astronaut,

в mission-control шаблон my-astronaut компонент создан несколько раз с помощью *ngFor директивы.

Если этого недостаточно, вы можете создать свой собственный провайдер для услуги, используя шаблон синглтона. (Смотрите также, как это реализовано в этом ответе.) Таким образом, используя провайдера, вы можете предоставить услугу любому компоненту.