Question

我正在尝试使用服务将数据从“第一个”组件传递到“第二个”组件。但是当我尝试在“第二个”组件中检索数据时，它是未定义的。

这是我的代码。

import { Component, OnInit } from '@angular/core';
import {Router} from "@angular/router";
import { testData } from '../model/Data';
@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.css']
})
export class FirstComponent implements OnInit {
 public constructor(private router: Router,private mydata:testData) { 
    this.mydata={firstname:"Amit",lastname:"Kumar",Mobile:"12345"};
 }
ngOnInit() { }
}

因为我在构造函数中设置了'myData'。这是“第二个”组件中的代码。

import { Component, OnInit } from '@angular/core';
import {Router} from "@angular/router";
import { testData } from '../model/Data';
@Component({
  selector: 'app-second',
  templateUrl: './second.component.html',
  styleUrls: ['./second.component.css']
})
export class SecondComponent implements OnInit {
  public constructor(private mydata:testData) {
    console.log(this.mydata.firstname);
   }
  ngOnInit() {}
}

Data.ts

import { Injectable } from '@angular/core';
@Injectable()
export class testData{
    public firstname: string;
    public lastname: string;
    public Mobile:string;
    public constructor() { }
}

并更新了我的app.module.ts文件

@NgModule({
...
providers: [testData],
  bootstrap: [AppComponent]
})

'Second'组件不是'first'的子组件。

Answer 1

执行此作业时

this.mydata={firstname:"Amit",lastname:"Kumar",Mobile:"12345"};

您没有分配服务的属性。您正在指定mydata字段成为另一个对象。

我认为你打算做的是，

this.mydata.firstname = "Amit";
this.mydata.lastname = "Kumar";
this.mydata.Mobile = "12345";

如果你想引用整个对象，你应该使用文档中的Subject：

https://angular.io/docs/ts/latest/cookbook/component-communication.html

注意：在某些情况下，这种方法可能不起作用;就像FirstComponent无法设置足够快的字段而SecondComponent尝试获取它们之前......

使用angular2

1 个答案: