從父按鈕操作事件訪問子變量值

Question

我們可以通過單擊父按鈕訪問子變量值嗎？ 子組件

@Component({
  selector: 'app-child-panel',
  templateUrl: './child-panel.component.html',
  styleUrls: ['./child-panel.component.scss'],
})
export class childComponent implements OnInit {
  
  selectedItems: any = [];
  constructor() {
  }

  ngOnInit(): void {
    this.data= {};
  }
  updateData(): void{
    this.data ={item:[]}
  }
}

父組件

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.scss'],
})
export class ParentComponent {
  childComponent: ChildComponent | undefined;
  constructor() {}

  onClick(): void {
 
  }

}

是否可以在父onClick方法中訪問子數據object。

有人提供解決方案將不勝感激。

提前致謝

Answer 1

您可能應該看看https://angular.io/guide/inputs-outputs#sending-data-to-a-parent-component 。

go 的方法是在子組件中定義一個 EventEmitter：

Output()
dataChanged = new EventEmitter();

...
updateData(): void{
  this.data ={item:[]}
  this.dataChanged.emit(data);    
}

然后 amd 相應地處理父組件中的事件（在 Typescript 中定義變量）：

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.scss'],
})
export class ParentComponent {
  childProp;
  constructor() {}

  onClick(): void {
    // now you can use this.childProp here
  }

}

<app-child-panel (dataChange)="childProp = $event">

Answer 2

你有一些選擇：

1 - 您可以按照其他答案的建議使用@Input @Output。

2 - 您可以使用ViewChild屬性裝飾器將子組件作為父組件中的屬性訪問，如下所示：

在父

@ViewChild('child', { static: false })
childComponent: ChildComponent;
 
onClick(){
  console.log(childComponent.childProp)
  //make sure the prop is public
}

在父模板中

<app-child-panel #child></app-child-panel>

3 - 您可以使用服務在組件之間進行通信，請查看以下問題： https://stackoverflow.com/a/51027980/2025458

如果您認為您將不得不在不止一位父母和一位孩子之間分享日期，則服務可能是一種方式