尝试用角/本地文本路由传递JSON数据
我目前正在进行一个本地转录/角形/类型转换项目，我基本上是试图将JSON数据从一个视图(属性)传递到另一个视图(propertyinfo)。
首先，我在property.service.ts中加载了一个JSON文件
import { Injectable } from '@angular/core';
import { HttpClientModule, HttpClient } from '@angular/common/http';
@Injectable()
export class PropertyService {
public propertyData: any;
public selectedProperty: any;
constructor(private http: HttpClient) {
this.loadProperties();
}
loadProperties() {
this.http.get('/pages/property/property.json').subscribe(
(data) => {
this.propertyData = data;
}
)
}
}此JSON数据显示在视图property.component.html中
<StackLayout *ngFor="let item of propertyData" class="list-group" xstyle="height: 300">
<GridLayout rows="110" columns="*, 40" (tap)="details(item)">
<StackLayout row="0" col="0">
<Label text="{{item.streetName}} {{item.houseNumber}}" class="text-primary p-l-30 p-t-5"></Label>
<Label text="{{item.etc}} {{item.etc}}" class="text-primary p-l-30 p-t-5"></Label>
</StackLayout>
<Label row="0" col="1" text="" class="fa arrow" verticalAlignment="middle"></Label>
</GridLayout>
<StackLayout class="hr-light"></StackLayout>
在这里，property.component.ts中的(tap)="details(item)"将调用一个函数
import { Component, OnInit } from '@angular/core';
import { Router } from "@angular/router";
import { PropertyService } from './property.service';
@Component({
selector: 'app-property',
templateUrl: 'pages/property/property.component.html',
providers: [PropertyService]
})
export class PropertyComponent implements OnInit {
public propertyData: any;
constructor(private router: Router, private propertyService: PropertyService) {}
ngOnInit() {
this.propertyData = this.propertyService.propertyData;
}
details(item: any) {
this.propertyService.selectedProperty = item;
this.router.navigate(["/propertyinfo"]);
}
}现在，当我在details函数中执行console.log(JSON.stringify(this.propertyService.selectedProperty));时，输出如下：
JS: {"ID":4,"description":"Lorem ipsum dolor sit amet...", "streetName":"Somestreet","houseNumber":459,"etc":"etc"}这是我的propertyinfo.component.ts
import { Component, OnInit } from '@angular/core';
import { PropertyService } from '../property/property.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-propertyinfo',
templateUrl: 'pages/propertyinfo/propertyinfo.component.html'
})
export class PropertyinfoComponent implements OnInit {
public selectedProperty: any;
constructor(private propertyService: PropertyService, private router: Router) {
this.selectedProperty = this.propertyService.selectedProperty;
}
ngOnInit() { }
}但是，当我在构造函数中执行console.log(JSON.stringify(this.selectedProperty));时，输出是JS: undefined。
在这篇文章的末尾，我将添加app.routing.ts和app.module.ts文件，这样您就可以看到我的所有导入/指令等等。我希望你能帮助我。
app.routing.ts
import { NgModule } from "@angular/core";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { Routes } from "@angular/router";
import { PropertyComponent } from "./pages/property/property.component";
import { PropertyinfoComponent } from ".//pages/propertyinfo/propertyinfo.component";
const routes: Routes = [
{ path: "", component: PropertyComponent },
{ path: "propertyinfo", component: PropertyinfoComponent },
];
@NgModule({
imports: [NativeScriptRouterModule.forRoot(routes)],
exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }app.module.ts
import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptHttpClientModule } from "nativescript-angular/http-client";
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { AppRoutingModule } from "./app.routing";
import { AppComponent } from "./app.component";
import { PropertyService } from "./pages/property/property.service";
import { PropertyComponent } from "./pages/property/property.component";
import { PropertyinfoComponent } from "./pages/propertyinfo/propertyinfo.component";
@NgModule({
bootstrap: [
AppComponent
],
imports: [
NativeScriptModule,
AppRoutingModule,
NativeScriptRouterModule,
HttpClientModule,
NativeScriptHttpClientModule,
],
declarations: [
AppComponent,
PropertyComponent,
PropertyinfoComponent
],
providers: [
PropertyService
],
schemas: [
NO_ERRORS_SCHEMA
]
})
export class AppModule { }谢谢你提前提供帮助。如果我需要澄清/提供更多的信息，请告诉我。
回答 1
Stack Overflow用户
发布于 2018-01-20 03:36:43
console.log(JSON.stringify(this.selectedProperty))在PropertyinfoComponent中返回未定义的内容，因为注入的PropertyService服务在PropertyinfoComponent中与在PropertyComponent中的实例不同。
您没有为这两个组件发布完整的.html，所以我只能假设您有一个类似于PropertyComponent是父组件的东西，并且在html中有一个引用/包含一个PropertyinfoComponent，并且由于它的角度工作方式，它注入了一个新的服务实例，而不是使用来自父组件的一个实例。
有关这类问题的角度服务注入的更多信息，请查看Templier的答案：How do I create a singleton service in Angular 2?
https://stackoverflow.com/questions/48350567
复制相似问题
腾讯云开发者
