我有一個從父組件傳遞的物件 Person ，如下所示。在 ngOnInit() 之前宣告屬性時，名稱被初始化為空字串。該屬性用于在另一個組件中設定布林值。即使父組件在父組件中具有 name = John 的值，場景 1 也會將該值擦除為空字串，從而影響布林值。場景 2 不會改變 name = John 的值。方案 1 和 2 中的兩個作業有什么區別？為什么場景 1 會清除父組件中的原始值？
export interface IPerson {
name?: string;
}
// In a child component:
@Input() person: IPerson = { name: '' }
// scenario 1:
ngOnInit(): void {
this.person.name = '';
}
// scenario 2:
ngOnInit(): void {
this.person = { name: '' }
}
uj5u.com熱心網友回復：
我認為如果您使用不同的值而不是空字串，這會變得更加清楚。假設我們有相同的設定：
export interface IPerson {
name?: string
}
@Component({
selector: 'app-parent',
template: `
<p>Parent value: {{person.name}}</p>
<app-child [person]="person"></app-child>`
})
export class ParentComponent {
person: IPerson = { name: 'John' };
}
@Component({
selector: 'app-child',
template: `<p>Child value: {{person.name}}</p>`
})
export class ChildComponent implements OnInit {
@Input() person: IPerson = { name: '' };
ngOnInit() {
// Scenario 1:
this.person.name = 'Felicity';
// Scenario 2:
this.person = { name: 'Norah' };
}
}
當你渲染父組件時，你會看到類似這樣的東西：
Parent value: Felicity
Child value: Norah
這是因為在場景 1 中，我們更改name了父物件上的欄位。如果您愿意，它是“通過參考”傳遞的，因此對欄位的修改已經改變了父母所知道的。
場景 2 忘記了父物件的物件，并將其替換為只有子物件知道的新物件。因此，我們看到兩個不同的名稱；一個在父母身上，一個在孩子身上。
使用這個StackBlitz 玩弄它。
在您的情況下，方案 1 會覆寫“John”，因為您正在更改從父級傳遞的實際物件。方案 2 不會覆寫“John”，因為您正在使用一個新物件，而不是從父物件傳遞的那個。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/431906.html
下一篇：如何檢查變數是否存在于角度？