Question

我正在ngAfterContentInit中进行http调用，并且根据响应，我想将数据传递给子组件，然后子组件使用该子组件显示一些内容。我用

public static yourString: Subject<String> = new Subject<string>();

在子级中，并在子级构造函数中订阅。我调用了 YourChildComponent.yourString.next(yourUpdatedval)在ngAfterContentInit中。

但是问题是，子构造函数稍后运行，并且在事件触发后发生订阅。我该如何解决？

我实际上想用父级的ngAfterContentInit的http调用值更新子级。这是我的原始要求。

Answer 1

只需在您的Child上创建一个@Input属性，然后使用属性绑定语法将您想要的值传递给它即可。像这样：

ChildComponent 班级：

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

@Component({...})
export class ChildComponent implements OnInit {
  @Input() childProperty;
}

ParentComponent HTML：

<app-child [childProperty]="childProperty"></app-child>

ParentComponent 班级：

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

@Component({...})
export class AppComponent  {

  childProperty = {
    foo: 'bar'
  };

  constructor(private http: HttpClient) {}

  ngOnInit() {}

  ngAfterViewInit() {
    this.http.get('https://jsonplaceholder.typicode.com/todos/1')
      .subscribe(user => this.childProperty = user);
  }
}

这是您推荐的Working Sample StackBlitz。

注意：随着值的更改，您应该在视图上看到非常轻微的翻转。但这会改变而没有任何问题。

更新

您还可以使用SharedService在这两个组件之间共享数据。理想情况下，由于这两个组件之间存在父子关系，所以没有太大意义。但是，既然您已经走了这条路，那么让我们解决当前的问题。

所以您的SharedService看起来像这样：

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

@Injectable()
export class SharedService {

  private sharedData: BehaviorSubject<any> = new BehaviorSubject<any>({});
  sharedData$: Observable<any> = this.sharedData.asObservable();

  constructor() { }

  updateSharedData(updatedData) {
    this.sharedData.next(updatedData);
  }

}

您可以通过在SharedService上调用ParentComponent来传递updateSharedData中的一些数据：

...

import { SharedService } from './shared.service';

@Component({...})
export class AppComponent  {

  ...

  anotherPropertyForChild = {
    anotherKey: 'Another Value'
  };

  constructor(
    ...,
    private shared: SharedService
  ) {}

  ngOnInit() {
    this.shared.updateSharedData(this.anotherPropertyForChild);
  }

  ngAfterViewInit() {
    ...

    // Something like this:
    this.http.get('https://jsonplaceholder.typicode.com/posts/1')
      .subscribe(post => this.shared.updateSharedData(post));
  }
}

然后在您的ChildComponent中：

import { Component, OnInit, Input } from '@angular/core';
import { SharedService } from '../shared.service';

@Component({...})
export class ChildComponent implements OnInit {

  ...
  anotherChildProperty: any;

  constructor(private shared: SharedService) { }

  ngOnInit() {
    this.shared.sharedData$.subscribe(
      sharedData => this.anotherChildProperty = sharedData
    );
  }

}

我还通过此实现更新了Stackblitz。

希望这能使您到达想要的地方。

angular ngAfterContentInit将数据传递给子组件

1 个答案:

更新