使用ViewChild更新ChildComponent属性

编程问答 2022-07-28

问题描述

我是相当新的Angular，并且正在玩ViewChild和ViewChildren。我尝试了一种情况 我的today = new Date()中有一个Component2属性。而且我正在使用Component1在ViewChild中访问此属性，并使用setInterval() for every second更新时间。

现在，我使用*ngFor指令创建了多个Component2。但是我看到只有初始Component2的today属性正在更新。剩余的未更新。

下面是我的代码。

Component1.ts 

import{Component,ViewChild,ElementRef,AfterViewInit,OnInit,ViewChildren,QueryList}from"@angular/core";

import { Component2 } from "./Component2";

@Component({
  selector: "comp1",templateUrl: "./Component1.html"
})
export class Component1 implements AfterViewInit {
  @ViewChild(Component2) myComponent2: Component2;

  public Component2Array: Array<String> = [
    "Paragraph one","Paragraph Two","Paragraph Three","Paragraph Four"
  ];

  ngAfterViewInit(): void {
    console.log("Component 1 => AfterViewInit",this.myComponent2);
    setInterval(()=>
    {
      this.myComponent2.today = new Date();
    }) 
  }
}

Component1.html 

<div #div1>
  <h1 #header1>This is Header 1</h1>
</div>
<div #component2Div>
  <comp2 *ngFor="let item of Component2Array" [message]="item"> </comp2>
</div>

Component2.ts 

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

@Component({
  selector: "comp2",templateUrl: "./Component2.html"
})
export class Component2 implements AfterViewInit {
  public today = new Date();
  
  @input() message: string;
  ngAfterViewInit(): void {}
}

Component2.html 

<div>
  <h1>This is Component 2</h1>
  <h2>{{today}}</h2>
  <div>
    {{message}}
    <div></div>
  </div>
</div>

任何人都可以让我知道为什么仅初始Component2的today属性正在更新。 Example here

预先感谢

解决方法

我自己解决了此问题。我使用的是ViewChild而不是ViewChildren。 更改了代码

@ViewChild(Component2) myComponent2: Component2;

到

@ViewChildren(Component2) myComponent2: QueryList<Component2>;

和

来自

setInterval(()=>
{
  this.myComponent2.today = new Date();
})

到

setInterval(() => {
      this.components.forEach((element) => (element.today = new Date()));
    });
angularangulartypescripttypescripttypescriptviewchild