Question

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

来自app.component

<router-outlet></router-outlet>

来自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;
}

state -compnent.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 {

  }

}

这是问题所在。

如何使用路由器将整个对象传递给组件？（注释对象在app.component中初始化）
如何在状态组件的“ ngOnInit”方法中接收整个对象？请帮忙

Answer 1

有多种方法可以实现它。一种方法是使用navigate方法发送序列化的对象。尝试以下

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

将goToState()函数绑定到AppComponent模板中的任何元素。

然后在StateComponent中使用ActivatedRoute获取参数。

state.component.ts

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

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

1 个答案: