使用Angular 9中的路由器发送和接收对象

12 浏览
0 Comments

使用Angular 9中的路由器发送和接收对象

我正在使用最新版本的Angular 9和最新版本的Node.js。以下是示例代码：

来自app.component

来自app.component.ts

import { Component, OnInit } from '@angular/core';
import { baseObject } from '../app/baseObject';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  oBase: baseObject;
  
  ngOnInit(): void {
    this.oBase = new baseObject();
    this.oBase.customerId = 1;
    this.oBase.customerName = 'jain';
    this.oBase.stateId = 10;
    this.oBase.customerAddress = 'Bangalore';
    this.oBase.pincode = 12233;
  }
}

来自app-routing.module

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { StateComponent } from '../app/state/state.component';
const routes: Routes = [
  { path: '', redirectTo: '/statemain', pathMatch: 'full' },
  { path: 'statemain', component: StateComponent }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

来自app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { StateComponent } from './state/state.component';
@NgModule({
  declarations: [
    AppComponent,
    StateComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

类属性

export class baseObject {
  customerId: number;
  stateId: number;
  customerName: string;
  customerAddress: string;
  pincode: number;
}

state-component.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-state',
  templateUrl: './state.component.html',
  styleUrls: ['./state.component.css']
})
export class StateComponent implements OnInit {
  constructor() { }
  ngOnInit(): void {
  }
}

这是问题：

  1. 如何使用路由将整个对象传递给组件？（注意：对象在app.component中初始化）
  2. 如何在state组件的'ngOnInit'方法中接收整个对象？请帮忙。
0

1 答案

0 Comments

在Angular 9中，使用路由器发送和接收对象有多种方法。其中一种方法是在navigate方法中发送序列化对象。请尝试以下操作。

首先，在app.component.ts文件中，定义一个oBase对象，并在ngOnInit()方法中初始化它。

export class AppComponent implements OnInit {
  oBase : baseObject;
  ngOnInit(): void {
    this.oBase = {
      customerId: 1, 
      customerName: 'jain', 
      stateId: 10, 
      customerAddress: 'Bangalore',
      pincode: 12233
    }
  }
  goToState() {
    this.route.navigate(['/statemain', { 'base': JSON.stringify(this.oBase) }])
  }
}

然后，在AppComponent模板中的任何元素上绑定goToState()函数。

接下来，在StateComponent中使用ActivatedRoute来获取参数。

import { Component, OnInit } from '/core';
import { ActivatedRoute } from '/router';
import { baseObject } from '../app/baseObject';
@Component({
  selector: 'app-state',
  templateUrl: './state.component.html',
  styleUrls: ['./state.component.css']
})
export class StateComponent implements OnInit {
  oBase: baseObject;
  constructor(private route: ActivatedRoute) { }
  ngOnInit() {
    this.oBase = JSON.parse(this.route.snapshot.paramMap.get('base'));
    console.log(this.oBase);
  }
}

通过以上方法，我们可以在Angular 9中使用路由器发送和接收对象。

0