在组件之间共享 angular 中的数据

Question

I am new to angular and working on a application. I have a "Save" button in my page. On click of which I need to route to a page. With click of this save button, I also want to send a array to next routed component. I want to recieve that array in next component. Both the component are at same level

As per many tutorial sending in query params is not a good idea. I was thinking to make a getter and setter in a service and calling getter method in routed component and access the array. But not sure whether it is a good approach or not. Then how I can send my data to next page?

Answer 1

You can either use the approach @Suhas suggested or handle your state via BehaviourSubjects and Observabels. So first you create a service in which you define your behaviourSubject and the according Observable:

private currentRouteSubject$ = new BehaviorSubject('initalValue');
currentRouteObservable = currentRouteSubject$.asObservable();

Then, in that service, you define a method which gets called whenever the user navigates or clicks that button:

setNavigationData(someData) {
this.currentRouteSubject$.next(someData);
}

Now in your other component, you subscribe to that Observable and you will get the latest emitted value. So that means you only need to inject the Service via Dependency Injection in your two components. In the first you need the service so you can call the setNavigationData function, In the second component you need the service because you have to subscribe to the Observable which, at the end, holds the latest emitted value. Thats the approach I use.

Answer 2

You can either

1. Use a store like NgRx
2. Simply create your own store in a file like store.ts = const store = {data1: {}}; export default store;const store = {data1: {}}; export default store; Then import the store in component1 and assign data to data1. The data change will reflect to any component that imported it. But be careful not to modify store itself. It will lose any reference.
3. Use service class members to store data. You can inject the service to any component that needed to modify or retrieve the data.

Answer 3

You can make use of navigationExtras to send an object via router. You don't need any third party library, just inject the router in the constructor and make use of it

import { NavigationExtras, Router } from "@angular/router";    
constructor(private _router: Router) {}    
    const navigationExtras: NavigationExtras = {
              state: {
                studentList: this.students
              },
            };

While navigating you can send the navigation extras like below

this._router.navigate([], navigationExtras).then((result) => {
      // We have to hard code base href whenver we use window.open
      window.open(redirectionUrl, "_blank");
    });

Here is the demo link

Answer 4

Use package https://www.npmjs.com/package/ngx-navigation-with-data

First you need to import the NgxNavigationWithDataComponent class in you app.module.ts Define some path in app-routing.module.ts file Import the NgxNavigationWithDataComponent class in your componet where you want to use this package Now you can use the package's methods. app.module.ts

import { NgxNavigationWithDataComponent } from "ngx-navigation-with-data";
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    AppRoutingModule
  ],
  providers: [NgxNavigationWithDataComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  {
    path:'home',
    component:HomeComponent
  },
    {
    path:'about',
    component:AboutComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

home.component.ts

import { Component, OnInit } from '@angular/core';
import { NgxNavigationWithDataComponent } from 'ngx-navigation-with-data';

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

  constructor(public navCtrl: NgxNavigationWithDataComponent) { }

  ngOnInit() {
  }

  navigateToABout() {
  this.navCtrl.navigate('about', {name:"virendta"});
  }
  
}

about.component.ts

import { Component, OnInit } from '@angular/core';
import { NgxNavigationWithDataComponent } from 'ngx-navigation-with-data';

@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.css']
})
export class AboutComponent implements OnInit {

  constructor(public navCtrl: NgxNavigationWithDataComponent) {
    console.log(this.navCtrl.get('name')); // it will console Virendra
    console.log(this.navCtrl.data); // it will console whole data object here
  }

  ngOnInit() {
  }

}

Properties

get(key): method It will return the value of data object from previous component

data: get property It will give the whole data object of previous component

navigate(page, data): method It will navigate to the component name of page, in routing.module file, with data