[英]Angular binding object from parent to child component
I have a problem with Anglular 8 and binding input parameters from parent component to child component.我在使用 Angular 8 并将输入参数从父组件绑定到子组件时遇到问题。 I have the following setup:
我有以下设置:
-app.component.ts -app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'parent-child-binding';
showTitle: boolean = true;
childData = [];
onBoolean(){
this.showTitle = !this.showTitle;
}
onComplexAdd(){
this.childData.push("data 4");
this.childData.push("data 5");
}
onComplexEdit(){
this.childData[0] = "data 1 edited";
this.childData[1] = "data 2 edited";
}
onComplexNew(){
this.childData = [
"data 1",
"data 2",
"data 3"
]
}
}
-app.component.html -app.component.html
<button (click)="onBoolean()">Boolean Bind</button>
<button (click)="onComplexNew()">Complex Object New</button>
<button (click)="onComplexEdit">Complex Object Edit</button>
<button (click)="onComplexAdd">Complex Object Add</button>
<app-child [data] = "childData" [showTitle]="showTitle"></app-child>
-child.component.ts -child.component.ts
import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit, OnChanges {
@Input() showTitle : boolean = true;
@Input() data : Array<any>;
constructor() { }
ngOnChanges(changes: SimpleChanges): void {
console.log(changes);
}
ngOnInit(): void {
}
}
-child.component.html -child.component.html
<h3 *ngIf="showTitle">Hello from child</h3>
<p *ngFor="let item of data">{{item}}</p>
So when I start I see the following:因此,当我开始时,我看到以下内容:
and the console:和控制台:
When I click on the first button, as expected the title Hello from child
shows and disappears.当我单击第一个按钮时,正如预期的那样,标题
Hello from child
显示并消失。 When I click on the second button, as expected I see:当我单击第二个按钮时,正如预期的那样,我看到:
and the console:和控制台:
When I click on the third and forth buttons, nothing happens, not in the UI or console (the onChanges
method seems that is not firing).当我单击第三个和第四个按钮时,什么都没有发生,而不是在 UI 或控制台中(
onChanges
方法似乎没有触发)。
An I doing something wrong, or this that I want to achieve is not possible?我做错了什么,或者我想要实现的目标是不可能的?
Best regards, Julian最好的问候,朱利安
EDIT : After a comment and an answer from @MBB and @Apoorva Chikara, I've edited the code.编辑:在@MBB 和@Apoorva Chikara 发表评论和回答后,我编辑了代码。
<button (click)="onBoolean()">Boolean Bind</button>
<button (click)="onComplexNew()">Complex Object New</button>
<button (click)="onComplexEdit()">Complex Object Edit</button>
<button (click)="onComplexAdd()">Complex Object Add</button>
<app-child [data] = "childData" [showTitle]="showTitle"></app-child>
The edition made the buttons to act (do something), but it is not what I expect.该版本使按钮可以采取行动(做某事),但这不是我所期望的。 What I mean: When I click on the
Complex Object Edit
button in the UI I see:我的意思是:当我单击 UI 中的
Complex Object Edit
按钮时,我看到:
But in the console, there is no ngOnChanges
callback firing, but the binded object has changed, as we can see on the print screen ( <p *ngFor="let item of data">{{item}}</p>
) fired and printed out the new values.但是在控制台中,没有触发
ngOnChanges
回调,但是绑定的 object 发生了变化,正如我们在打印屏幕上看到的那样( <p *ngFor="let item of data">{{item}}</p>
)触发并打印出新值。
The same happens when I click on the Complex Object Add
button.当我单击
Complex Object Add
按钮时,也会发生同样的情况。 In the UI I see:在用户界面中,我看到:
But in the console the ngOnChanges
callback is not firing, but the UI is containing the new added data.但在控制台中,
ngOnChanges
回调未触发,但 UI 包含新添加的数据。
I'm confused, can anyone advice please?我很困惑,请任何人提供建议吗?
You have a very simple fix, you are not calling a function instead assigning its definition:你有一个非常简单的修复,你没有调用 function 而是分配它的定义:
<button (click)="onComplexEdit()">Complex Object Edit</button> // call it as a function
<button (click)="onComplexAdd()">Complex Object Add</button>// call it as a function
The issue, you are facing for NgonChanges
is due to the arrays passed by reference, this has a good explanation why this happens.您面临的
NgonChanges
问题是由于 arrays 通过引用传递的, 这很好地解释了为什么会发生这种情况。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.