当前位置: 首页 > 知识库问答 >
问题:

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

严柏
2023-03-14

我正在使用最新版本的angular 9和最新版本的nodejs。下面是示例代码

来自app.component

<router-outlet></router-outlet>

From 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.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;
}

状态-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. 如何使用路由器将整个对象传递给组件?(注意对象在应用程序组件中初始化)
  2. 如何在状态组件的“ngOnInit”方法中接收整个对象?请帮忙

共有1个答案

查淮晨
2023-03-14

有多种方法可以实现它。一种方法是在导航方法中发送序列化对象。请尝试以下操作

app.component.ts

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) }])
  }
}

并在< code>StateComponent中使用< code > activate route 获取参数

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/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);
  }
}
 类似资料:
  • 如何从Akka HTTP路由向Akka Sink发送元素/消息?我的HTTP路由仍然需要返回正常的HTTP响应。 我想这需要一个支流/枢纽。正常的HTTP路由是来自HttpRequest的流- 下面是一个非常简单的单路由akka http应用程序。为了简单起见,我使用了一个简单的println水槽。我的生产用例显然将涉及一个不那么琐碎的水槽。 编辑:或者在使用低级akka http API时,如何

  • 我正在使用一个发送任务,下面的Javadelegate类附加到该任务。

  • 问题内容: 我正在使用套接字连接我的Android应用程序(客户端)和Java后端服务器。每次与服务器通信时,我都希望从客户端发送两个数据变量。 1)某种消息(由用户通过界面定义) 2)消息的语言(由用户通过界面定义) 我该如何发送这些消息,以便服务器将每个消息解释为一个单独的实体? 在读取了服务器端的数据并做出了适当的结论之后,我想向客户端返回一条消息。(我想我会没事的) 因此,我的两个问题是如

  • 我在网上搜索了很多,但是没有找到通过套接字发送对象并按原样接收的解决方案。我知道它需要酸洗,我已经做过了。将其转换为字节,然后从另一方面接收。但如何将这些字节转换为该类型的对象。 这是在客户端将对象转换为StringIO并发送到服务器的代码。在服务器端,我得到字节。现在我正在搜索要再次转换为StringIO的字节,以便获得对象值。 在代码中,对象被包装在StringIO中,并通过套接字发送。任何更

  • 我使用的是Sony FeliCa RC-S380,我想在读卡器处于读写器模式时,以卡模拟模式(HCE)向Android设备发送一些APDU命令。从外观上看,我可以使用Windows接近库来处理与该读卡器的通信,但我似乎无法找到将读卡器置于读写器模式以发送APDU命令和接收响应的方法。 ProximityDevice类用于发送名为PublishBinaryMessage的消息的函数,它看起来最像我想