Question

我正在尝试创建以下组件体系结构。具有较大模板的父组件，该模板是许多子组件的占位符。父组件负责从服务器获取数据。父模块还具有将数据提供给子组件的服务。实际数据订阅将在子组件中占据一席之地。这是一些相关的代码：通用子组件：

import { Component, OnDestroy, OnInit, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { DataSvcService } from '../../dashboard/data-svc.service';

@Component({
 selector: 'app-generalstatistics',
 templateUrl: './generalstatistics.component.html',
 styleUrls: ['./generalstatistics.component.css']
})
export class GeneralstatisticsComponent implements OnInit, OnDestroy, AfterViewInit  {
@ViewChild('generalstatistics', {static: false}) span: ElementRef;
subscription;
generalStatistics = new Array({});

constructor(private dataSvc: DataSvcService) {}

ngOnInit() {
  this.subscription = this.dataSvc.generalstatistics.subscribe(data => {
  this.generalStatistics = data;
 });
}
ngAfterViewInit() {
  console.log(this.span);
}
ngOnDestroy() {
  this.subscription.unsubscribe();
}
}

模板：generalstatistics.component.html

<span #generalstatistics></span>

父组件（实现模板）：

<div class="card-body pb-0">
    <app-generalstatistics></app-generalstatistics>
</div>

父组件服务：“ ../../ dashboard / data-svc.service”

import { BehaviorSubject, Subject, Observable } from 'rxjs';
import { Injectable } from '@angular/core';

@Injectable()
export class DataSvcService {

constructor() { }
  public generalstatistics = new BehaviorSubject<Array<object>>([{}]);

public get generalStatistics(): Observable<Array<object>> {
  return this.generalstatistics.asObservable();
}
}

父组件数据请求：

this.http.get<any>(`${environment.apiUrl}/api/
 home/`)
.subscribe((data: any) => {
  this.dataSvcService.generalstatistics.next(data);
});

我的想法是我希望将一般统计信息作为通用组件。实际的数据绑定应在父组件中进行。我正在尝试在实现中添加如下内容：

<app-generalstatistics **#someid**></app-generalstatistics>

所以我可以在generalstatistics组件代码中识别它，并将数据分配给span元素。但是当我检查this.span.nativeElement时，我看不到任何来自实际实现的东西。

我的问题是如何在解决方案中将数据绑定到子组件？ Shuold我会改变整个体系结构吗？

谢谢

Answer 1

您尝试过吗？在您的父组件中，您可以这样传递：

<app-generalstatistics [id]="someid" ></app-generalstatistics>

在您的generalstatistics component.ts中，您可以通过以下方式获得：

@Input() id;

Answer 2

让我们假设您的服务正确返回了您要查找的对象数组。您所需要做的就是将数据绑定到您的子组件。

因此，在您的子组件中，ts文件中将仅包含以下内容。

@Input() data: any; // You can replace "any" with an interface of the expected object

然后在父html文件中，如果您知道返回数据的顺序，则可以静态绑定数据，如下所示：

<app-generalstatistics
[data]="this.generalStatistics[0]"
>

<app-generalstatistics
[data]="this.generalStatistics[1]"
>

或者，如果不确定数组中将包含多少个对象，则只需指定：

<app-generalstatistics *ngFor="let gS of generalStatistics"
[data]="gS"
>

使用上述任何策略，您都可以删除ViewChild()文件中的ts elementRef，因为最终您将不再使用它。

角形子组件具有父组件的属性

2 个答案: