Question

我是 angular 的新手，正在开发一个应用程序。我的页面中有一个“保存”按钮。单击我需要路由到一个页面。单击此保存按钮后，我还想将数组发送到下一个路由组件。我想在下一个组件中接收该数组。两个组件处于同一级别

根据许多教程发送查询参数不是一个好主意。我想在服务中创建一个 getter 和 setter，并在路由组件中调用 getter 方法并访问数组。但不确定这是否是一个好方法。那么我如何将我的数据发送到下一页？

Answer 1

您可以使用@Suhas 建议的方法，也可以通过 BehaviourSubjects 和 Observabels 处理您的状态。所以首先你创建一个服务，在其中定义你的 behaviorSubject 和相应的 Observable：

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

然后，在该服务中，您定义一个方法，每当用户导航或单击该按钮时都会调用该方法：

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

现在在您的另一个组件中，您订阅了该 Observable，您将获得最新发出的值！所以这意味着你只需要通过依赖注入在你的两个组件中注入服务。首先，您需要该服务，以便您可以调用 setNavigationData 函数。在第二个组件中，您需要该服务，因为您必须订阅 Observable，该 Observable 最后保存最新发出的值。这就是我使用的方法。

Answer 2

你可以

使用像 NgRx 这样的商店
只需在类似 store.ts = const store = {data1: {}}; export default store; 的文件中创建您自己的商店，然后在 component1 中导入商店并将数据分配给 data1。数据更改将反映到导入它的任何组件。但是要注意不要修改 store 本身。它将丢失任何参考。
使用服务类成员来存储数据。您可以将该服务注入到需要修改或检索数据的任何组件中。

Answer 3

您可以使用 navigationExtras 通过路由器发送对象。您不需要任何第三方库，只需在构造函数中注入路由器并使用它

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

导航时，您可以发送如下导航附加内容

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

这是演示link

Answer 4

<块引用>

使用包 https://www.npmjs.com/package/ngx-navigation-with-data

首先你需要在你的 app.module.ts 中导入 NgxNavigationWithDataComponent 类在 app-routing.module.ts 文件中定义一些路径在要使用此包的组件中导入 NgxNavigationWithDataComponent 类现在您可以使用包的方法。 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() {
  }

}

属性

<块引用>

get(key) : method 它将返回数据对象的值上一个组件

data : get property 它将给出之前的整个数据对象组件

navigate(page, data) : method 它将导航到组件名称页面，在routing.module文件中，有数据

在组件之间以角度共享数据

4 个答案: