將變量從父組件傳遞到子組件 angular

Question

我無法使變量或 function 在第二個（子）組件中工作：它返回未定義...

我的父應用程序是

//app.component.ts
import { Component, Injectable, OnInit } from '@angular/core';
import { AppPipe } from './app.pipe';
import { AppService, InformesCounter } from './app.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  providers: [AppService, AppPipe],
  styleUrls: ['./app.component.sass']
})

export class AppComponent implements OnInit{
  title = 'webagn';
  filteredText: InformesCounter[] | any;
  titleList: InformesCounter[] | any;
  searchText: InformesCounter[] | any;
  informesCount: InformesCounter | undefined;
  informesTitle: InformesCounter[] | any;
  appPipe: AppPipe[] | any;
  
  constructor(private appService: AppService) { }

  ngOnInit(): void {
    this.showInformes();
    this.onSubmit();
  }

  showInformes() {
    this.appService.getInformes()
      .subscribe((data: InformesCounter) => {
        this.informesCount = data.meta;
        this.informesTitle = data.data;
        this.titleList = this.informesTitle.map((data: { attributes: { titulo: any; }; }) => data.attributes.titulo);
      });
  }

  onSubmit() {
    this.filteredText = new AppPipe().transform(this.titleList, this.searchText);
    console.log(this.filteredText);
  }

}

我的子組件是

import { Component, Input, OnInit } from '@angular/core';
import { AppComponent } from '../app.component';
import { AppService, InformesCounter } from '../app.service';
import { AppPipe } from '../app.pipe';

@Component({
  selector: 'app-auditorias',
  templateUrl: './auditorias.component.html',
  providers: [AppService, AppPipe],
  styleUrls: ['./auditorias.component.sass']
})
export class AuditoriasComponent implements OnInit {
  @Input() 
  titleList = this.appComponent.titleList;
  searchText: InformesCounter[] | any;
  num: number | undefined;

  constructor(private appService: AppService, private appComponent: AppComponent) { }

  ngOnInit(): void {
    this.onSubmit();
    this.showInformes();
  }

  showInformes() {
    this.appComponent.showInformes();
    
  }

  onSubmit() {
    this.appComponent.onSubmit();
  }

我無法使父組件中的函數在第二個組件中工作，我查看了 angular 文檔但對我不起作用，即使我將一個帶有數字的變量從父組件傳遞給子組件它返回未定義。 我需要你的幫助，因為我也為此創建了一項服務但沒有結果。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { HttpErrorResponse } from '@angular/common/http';

import { Observable, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';

export interface InformesCounter {
  data: any;
  meta: any;
  count: any;
  attributes: any;
  titulo: any[];
}
@Injectable({
  providedIn: 'root'
})

export class AppService {
  countInformes = 'http://localhost/blablabla';
  
  constructor(private http: HttpClient) { }

  getInformes(): Observable<InformesCounter> {
    return this.http.get<InformesCounter>(this.countInformes)
    .pipe(
      retry(3),
      catchError(this.handleError)
    );
  }

  private handleError(error: HttpErrorResponse) {
    if (error.status === 0) {
      console.error('Ocurrió un error:', error.error);
    } else {
      console.error(
        `El Sistema retornó ${error.status}, el mensaje fue: `, error.error);
    }
    return throwError(() => new Error('Ocurrió algo inesperado, intentelo más tarde.'));
  }

}

Answer 1

如果我理解正確的話，看起來您正在嘗試使用依賴注入將 AppComponent 注入到 AuditoriasComponent 的構造函數中。 那行不通的。

輸入值應該通過父級的 html 中的子級選擇器從父級傳遞給子級。

嘗試這樣的事情：

在app.component.html

<app-auditorias [titleList]="titleList"></app-auditorias>

然后在auditorias.component.ts

@Input() titleList: any[] = [];

然后它從一個空數組開始，直到它從其父級獲得輸入。