Javascript 角度@Input（）值相同时不会更改

当我运行这个程序时，最初我得到的输出是

false

，

5

，

500

，因为我已经在子组件中这样初始化了它们，但是当我尝试单击update按钮时，我无法恢复到以前的值。我希望输出为

true

，

10

，

1000

，但我得到的结果是

false

，

5

，

1000

。只改变了不同的号码

我如何解决这个问题，以便能够获得在父组件中设置的任何值

链接到

app component.html

<span (click)="clickme()">Update data</span>

hello.component.ts

export class AppComponent  {
  public parentBool: boolean;
  public parentNum: number;
  public p2: number;


  public ngOnInit(): void {
    this.parentBool = true;
    this.parentNum = 10;
    this.p2 = 100;
  }

  public clickme(): void {
    this.parentBool = true;
    this.parentNum = 10;
    this.p2 = 1000;
  }
}

@Component({
  selector: 'hello-comp',
  template: `
    <div>
     Boolean value is - {{boolChild}} <br/>
     Number value is - {{numChild}} <br />
     Second number is - {{numChild2}}
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
  @Input() boolChild: boolean;
  @Input() numChild: number;
  @Input() numChild2: number;


  public ngOnInit(): void {
    this.boolChild = false;
    this.numChild = 5;
    this.numChild2 = 500;
  }
  constructor(private _cd: ChangeDetectorRef){}

    public ngOnChanges(changes: {}): void {
      // this._cd.detectChanges();
      console.log(changes);
    }
}

@组件({
选择器：'hello comp'，
模板：`
布尔值为-{{boolChild}}

数值为-{{numChild}}

第二个数字是-{{numChild2}}
`,
changeDetection:ChangeDetectionStrategy.OnPush
})
导出类MyComponent{
@Input（）boolChild:boolean；
@Input（）numChild:number；
@Input（）numChild2：数字；
public ngOnInit（）：void{
this.boolChild=false；
this.numChild=5；
此值为0.numChild2=500；
}
构造函数（私有_cd:ChangeDetectorRef）{}
公共ngOnChanges（更改：{}）：无效{
//这个._cd.detectChanges（）；
控制台日志（更改）；
}
}

输入绑定发生在ngOnInit之前，您正在覆盖ngOnInit中的值

在声明中输入默认值：

@Input() numChild: number = 5;

---

就像这样

子组件中的输入变量此时是如何初始化的

初始化

AppComponent

，触发

ngOnInit

并呈现模板

初始化

MyComponent

，触发

ngOnChanges

。这将显示在控制台日志中，如下所示

触发器

ngOnInit

（注意：这是在

MyComponent

赋值

false

、

5

和

500

中的

ngOnChanges

后触发的）。这就是为什么这些值显示在模板中，而不是最初从

AppComponent

发送的值

单击

AppComponent

中的

updatedata

按钮，将推送值

true

、

10

和

1000

。它将显示以下输出

解释 根据

MyComponent

中的

ngOnChanges

，以前的值是

true

、

10

和

100

（来自

AppComponent

的

ngOnInit

）。

ngOnChanges

未注册值

false

、

5

和

500

，因为它们不是通过

输入（）进行更改的。因此，
changes
显示了唯一一个从其先前状态更改的对象，即
numChild2
。其他两个值保持不变，它们不会反映在
ngOnChanges
中

一种解决方案是避免在子对象中的
ngOnInit（）
钩子中赋值，并在定义过程中赋值

\u boolChild:boolean=false；
_numChild:number=5；
_numChild2：数字=500；



即使进行了这些更改，当您单击按钮时，仍将仅观察
changes
变量中的
numChild2
对象，因为这是如何工作的。它将只显示从以前状态更改的值，而不会反映保持不变的值。


这是钩子调用命令，供参考


一旦改变
奥尼特
多切克
AfterContentInit
事后检查
AfterViewInit
事后检查
探空
您是否尝试过先调用detectChanges

  ngOnInit() {
    this._cd.detectChanges();
    ....rest of your code...
  }

顺便说一句，我不明白为什么要在ngOnInit（）中设置与第14行和第15行相同的值。实际上你不需要…
你的问题是当一切都初始化时

父值为True，子值为False

您正在单击父span。这会将parentBool值设置为True。对于父组件，这不是一个更改。因此，更改检测不会触发

我用叉子叉了这个
从下面的链接

你可以尝试两种不同的方法

捕获ViewChildren并在父级中更新
有一个服务来维持中间状态，孩子们就会听那个状态。（如果需要，使用ngrx或其他简单的服务就足够了）（更喜欢这个，因为它更具可扩展性）
在我的例子中，值的更新发生在子组件中的函数内部。值更新不是在ngOnInit中发生的，而是在其他函数中发生的。我想在用户单击父组件时恢复我的值。这不会发生。例如：public ngOnInit（）：void{setTimeout（（）=>{this.boolChild=false；this.numChild=5；}，3000）；}。现在，将首先显示来自父级的值，3秒钟后，将显示来自子级的值，而不会出现任何问题。但是，当我再次尝试通过调用update函数从父组件更新时，它不会设置布尔值，而是会坚持从子组件更新值。我已经把这个例子简化了。首先它被设置为true，然后在某些函数的child中它变为false。现在我想在单击父组件中的更新文本时将其设置为true。我怎样才能做到这一点？这件事让我心烦意乱：（不要担心ngOnInit，子组件中的更新在一个单独的函数中发生。您再次尝试从
this.parentBool=true
更改为
this.parentBool=true
。没有更改。如果值没有更改，将不会触发
ngOnChanges
钩子。我已修改了您的Stackblitz:
{
  "numChild2": {
    "previousValue": 100,
    "currentValue": 1000,
    "firstChange": false
  }
}

  ngOnInit() {
    this._cd.detectChanges();
    ....rest of your code...
  }