Javascript Angular 6：从父组件接收数据后，在ngAfterContentChecked内连续执行http请求

我是Angular的新手，来自React.js

我有一个问题，Angular在从父组件接收数据后，会在

ngAfterContentChecked

内发出

HTTP

请求

我无法在

ngAfterContentInit

内发出请求，因为我需要等待父级完成发出请求

我只想让它在从家长那里得到数据后立即调用一次

在React.js中，我通常在

组件willreceiveprops

而在我做这个的时候

父组件：

//codes...
groupId = '';
//codes...

ngOnInit() {
  const id = '23esaddq3sdasd';
  this.dataService.getUser(id).subscribe(data => {
    //codes...
    this.groupId = data.groupId;
    //codes...
  });
}

data = [];
@Input() groupId;
fetch;

ngAfterContentChecked() {
  if (this.groupId) {
    const res = this.dataService.getGroupMembers(this.groupId).subscribe(data => 
      this.data = data;
      this.fetch = 'done';
    });
    if (this.fetch === 'done') {
      res.unsubscribe();
    }
  }
}

子组件：

//codes...
groupId = '';
//codes...

ngOnInit() {
  const id = '23esaddq3sdasd';
  this.dataService.getUser(id).subscribe(data => {
    //codes...
    this.groupId = data.groupId;
    //codes...
  });
}

data = [];
@Input() groupId;
fetch;

ngAfterContentChecked() {
  if (this.groupId) {
    const res = this.dataService.getGroupMembers(this.groupId).subscribe(data => 
      this.data = data;
      this.fetch = 'done';
    });
    if (this.fetch === 'done') {
      res.unsubscribe();
    }
  }
}

我试图

取消订阅

它，但仍然持续执行代码

---

任何人，请帮我不要使用ngAfterContentChecked，您可以使用ngOnChanges（），当父组件使用@input（）将数据传递给子组件时，会触发它

---

如果您有投影内容“ng content”并在父组件更改检测时访问任何DOM，则将使用ngAfterContentChecked生命周期。

您可以使用ngAfterContentChecked（）代替ngAfterContentChecked，当父组件使用@input（）将数据传递给子组件时，会触发ngochanges（）

---

如果您有投影内容“ng content”并在父组件更改检测时访问任何DOM，则将使用ngAfterContentChecked生命周期。

对于我来说，我会这样做：

父触发器http，您需要设置一个标志，如

isLoading=true

在.html中，使用

*ngIf=“！isLoading”

到该子组件

在父级完成接收请求后，设置

isLoading=false

这将使子组件呈现，您可以在子组件内使用

ngOnInit

hook从父组件接收数据

在子组件在

ngOnInit

中接收到来自父组件的输入后，您可以触发http

---

对我来说，我会这样做：

父触发器http，您需要设置一个标志，如

isLoading=true

在.html中，使用

*ngIf=“！isLoading”

到该子组件

在父级完成接收请求后，设置

isLoading=false

这将使子组件呈现，您可以在子组件内使用

ngOnInit

hook从父组件接收数据

在子组件在

ngOnInit

中接收到来自父组件的输入后，您可以触发http

---

您希望使用

ngOnChanges

，因为每次@Input值更改时都会触发该命令

ngOnChanges

的完整签名为：

ngOnChanges(changes: SimpleChanges): void

因此，请检查changes对象，查看它是否包含对@Input的更改，以及该值是否符合预期，然后按如下方式发出HTTP请求：

ngOnChanges(changes: SimpleChanges) {
  if (changes.groupId != null && fetch !== 'done') {
    const res = this.dataService.getGroupMembers(this.groupId).subscribe(data => 
      this.data = data;
      this.fetch = 'done';
    });
  }
}

没有必要取消搜索，因为HTTP请求的SUB将自动完成。要证明这一点，请执行以下操作：

    const res = this.dataService.getGroupMembers(this.groupId).subscribe(data => 
      this.data = data;
      this.fetch = 'done';
    },
    err => {
      console.log('I errored');
    },
    () => {
      console.log('I completed and won't fire again');
    });

---

PS NgaftContentChecked疯狂触发的原因是它的执行非常有规律。

您希望使用

ngOnChanges

，因为它会在@Input值每次更改时触发

ngOnChanges

的完整签名为：

ngOnChanges(changes: SimpleChanges): void

因此，请检查changes对象，查看它是否包含对@Input的更改，以及该值是否符合预期，然后按如下方式发出HTTP请求：

ngOnChanges(changes: SimpleChanges) {
  if (changes.groupId != null && fetch !== 'done') {
    const res = this.dataService.getGroupMembers(this.groupId).subscribe(data => 
      this.data = data;
      this.fetch = 'done';
    });
  }
}

没有必要取消搜索，因为HTTP请求的SUB将自动完成。要证明这一点，请执行以下操作：

    const res = this.dataService.getGroupMembers(this.groupId).subscribe(data => 
      this.data = data;
      this.fetch = 'done';
    },
    err => {
      console.log('I errored');
    },
    () => {
      console.log('I completed and won't fire again');
    });

---

PS NgafteContentChecked疯狂触发的原因是它的执行非常有规律。

您可以使用setter和getter，而不是ngOnChanges，它们只有在父组件使用@input（）将数据传递给子组件时才会触发

当父组件或子组件中的某些内容发生更改时，ngOnChanges始终运行

  private _name;
  get name() { return this._name };
  @Input() set name(val: string) {
      if (val) {
          this._name = val;
          this.getGreetings(this.name)
      }
  };
  greetings = '';
  processing = false;
  constructor(){}

  getGreetings(name){
      this.processing = true;
      setTimeout(()=>{
          this.greetings = 'Hi.. '+name+', How are you';
          this.processing = false;
      },2000)
  }

---

工作演示链接：-

您可以使用setter和getter，而不是ngOnChanges，只有当父组件使用@input（）将数据传递给子组件时，才会触发setter和getter

当父组件或子组件中的某些内容发生更改时，ngOnChanges始终运行

  private _name;
  get name() { return this._name };
  @Input() set name(val: string) {
      if (val) {
          this._name = val;
          this.getGreetings(this.name)
      }
  };
  greetings = '';
  processing = false;
  constructor(){}

  getGreetings(name){
      this.processing = true;
      setTimeout(()=>{
          this.greetings = 'Hi.. '+name+', How are you';
          this.processing = false;
      },2000)
  }

工作演示链接：-