无法在 angular 2 中将响应 object 从一个组件传递到另一个组件

Question

import { Component, Input, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FetchService } from '../fetch. Service';

@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.css']
})
export class FirstComponent implements OnInit {

  constructor(private FetchService : FetchService,private router : Router) { }
  ngOnInit(): void {
    this.getData()
  }
  @Input() items: any;
  getData(){
    this.FetchService.fetchData().subscribe(data => {
    this.items=data;
    console.log(this.items + "first")
    },
     error => console.error(error)
    )
    
    }
  
    second(){
      this.router.navigateByUrl("/second")
    }
}

在第二个组件 HTML 和 Ts -

<app-first [items]="fetchBirds"></app-first>

export class SecondComponent implements OnInit {
  constructor() { }
  fetchBirds:any
  ngOnInit(): void {
    this.data()
  }

  data(){
    console.log(this.fetchBirds + "2nd")
  }
}

我有两个组件，第一个和第二个。 我有响应，我可以在第一个 component.ts 中获取并在控制台中打印。 我正在使用@Input并将其传递给第二个组件，但它在第二个组件中未定义。 请帮忙。

Answer 1

@Input 用于将数据从父组件传递到子组件。 在这里，您的 Second 组件似乎是父组件。

当您像这样在第二（父）组件中使用您的第一个（子）组件时 -

<app-first [items]="fetchBirds"></app-first>

fetchBirds应该属于 Parent （第二个组件），它的值在第二个组件中获取。

并且项目应该属于 Child （第一个组件），它的值将通过使用 @Input 来获取，如下所示 -

 @Input() items: any;

在您的情况下，您从子组件中的服务获取数据并将其分配给来自父组件的项目。

要么获取值是父项并将其传递给子项，要么如果您可以在子项中获取，则不需要@Input。

Answer 2

根据你的代码。 您正在第二个组件中加载第一个组件。 所以父组件是第二个组件。 子组件是第一个组件。 您还需要将数据从第一个组件传递到第二个组件，这意味着有一个子数据传递给父数据。 在那里你需要使用 output() 装饰器。

第二个组件（父组件）

<app-first (dataEvent)="receiveData($event)"></app-first>

export class SecondComponent implements OnInit {

  constructor() { }

  data:any; //any or your model

  receiveData($event) {
    this.data= $event
  }
}

第一个组件（子组件）

export class FirstComponent implements OnInit {

  constructor(private FetchService : FetchService,private router : Router) { }

  ngOnInit(): void {
    this.getData()
  }

  @Output() dataEvent = new EventEmitter<string>();

  getData(){
    this.FetchService.fetchData().subscribe(data => {
    this.items = data;
    console.log(this.items + "first")
    this.dataEvent.emit(this.items);
    },
     error => console.error(error)
    )
    
    }

Answer 3

我同意 Priyesha，在这种情况下您不需要 @Input。

只需使用 @Inject 并直接在第一个组件中获取第二个组件。 任何公共属性或方法都将可用：

import { Component, Inject, Input, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.css']
})
export class FirstComponent implements OnInit {
  
  protected items: any;

  constructor(
    private router: Router,
    @Inject(SecondComponent) protected component: SecondComponent) { }

  public ngOnInit(): void {
    this.items = this.component.fetchBirds;
    console.log('first:', this.items);
  }
  
  public second(): void {
    this.router.navigateByUrl("/second")
  }
}

请注意，这只是可能的，因为<app-first></app-first>包含在 SecondComponent 的 html 中，因此可以通过 FirstComponent 中的 DI 访问 SecondComponent。