在没有导航或路由的角度 2 类型脚本中，将数据一个组件传递到另一个组件的所有可能性是啥？

Posted 2023-03-13

【中文标题】在没有导航或路由的角度 2 类型脚本中，将数据一个组件传递到另一个组件的所有可能性是啥？

【英文标题】：What are all the possibilities to pass the data one component to another component without navigation or route in angular 2 type script?在没有导航或路由的角度 2 类型脚本中，将数据一个组件传递到另一个组件的所有可能性是什么？

【发布时间】：2017-08-27 14:43:09

【问题描述】：

我是学习 Angular 2 类型脚本的初学者。我想将一个组件之间的数据传递给另一个组件？

服务.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;

    

First 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);
    

    

第二个组件.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。如何获取第一个组件值？

【问题讨论】：

angular.io/docs/ts/latest/cookbook/component-communication.html

***.com/questions/42624053/… 这里我已经回答过了

【参考方案1】：

您应该由父组件或模块提供服务，以确保组件之间仅共享一个实例。在子组件上使用providers:[GetService] 在实例化组件时重新创建服务。因此，您会丢失其他组件设置的数据。

如果您遵循指南Parent and children communicate via a service，您会看到子组件没有执行通信的共享服务的提供者，但父组件mission-control 仅为每个子组件提供一个实例，例如@ 987654326@.

在mission-control 模板中，my-astronaut 组件通过*ngFor 指令多次实例化。

如果还不够，您可以使用singleton pattern 为服务创建自己的提供者。 （另请参阅this 答案中的实现方式。） 通过这种方式，您可以使用提供者为任何组件提供服务。

【参考方案2】：

您可以创建一个服务并将其导入您的主模块并从那里导出，然后将其注入您要使用它的组件中。

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 存储状态。

【讨论】：

如果您打开新浏览器，此服务将被释放