@Input 从父组件发出后不取最新值

Question

我有一个发出最新值的父组件，而在子组件中它使用@Input，其中不返回最新值。

基本上是这样开始的 在子组件中...

@Input() test;any;

我们确实将此测试绑定到 HTML 中，然后在按钮的单击事件中我们使用输入值 'test' 执行一些操作

onClickButton() {

this.test='your request is in progress'
....does some function where in it passes call to parent componentt and there it retrives the latest data of test so I am expecting that this.test would replaced by latest data from parent component.

}

但是，这里不是这种情况，它保留了“您的请求正在进行中......”

我在 ngOnChanges(changes:simpleChanges) 之类的子组件中进行了尝试，并尝试将 currentValue 分配给 this.test 值；但事情并没有朝着正确的方向发展。即使在父组件中，一切都正确处理我尝试打印最新值，但在子组件中它仍然是旧值。

我也试过了

this.ref.detectChanges();
this.ref.markforCheck();

但事情并没有帮助我从父组件获取更新值。

父母.ts

this.test ="从服务中获取价值，并且可以在调试器中看到该价值即将到来"

Answer 1

我们需要查看您的父组件。

使用您当前的代码，我们看不到您将 test 变量覆盖到父组件中的那一刻。

我做了一个 StackBlitz just here，这是你需要的吗？

随意编辑并发回。

Answer 2

查看StackBlitz link

你的 parent.html 的 html...

<button (click)="changeValue()">Change</button>
 <hr>
<app-child [test] ="test"></app-child>

你的 .ts 的 parent.ts...

export class AppComponent  {
   test:any ={};
   changeValue(){
       this.test['data'] = 'loading data form server...'
       setTimeout(()=>{
           this.test['data'] = "Loaded..."
       },500)
   }
}

您的 child.html 是...

{{value |json}}

你的 child.ts 是...

export class ChildComponent implements OnInit {
   value:any;
   @Input('test') set testInput(value : any){
     this.value = value;
   }  
   constructor() { }
   ngOnInit() {
   } 
}