如何在angular2+中將動態數據從父級傳遞給子級

Question

正如我們所知，在 angular 中，父子通信使用 @Input 裝飾器發生，但如何將動態數據從父子傳遞給子。例如，'name' 屬性是在父級中定義的，它的值動態變化並更新了 'name' 的值打算在子組件中使用，那么如何在沒有服務的情況下實現它。

Answer 1

您可以使用 ngOnChanges 生命周期查看子組件中的輸入更改

在您的子組件中，您應該implements OnChanges

ngOnChanges(changes: SimpleChanges): void {
    for (let propName in changes) {
      let change = changes[propName];
      if (propName === "YOUR_INPUT_NAME") {
        this.YOUR_INPUT_NAME = (change.currentValue);
      }
    }
  }

Answer 2

您可以使用服務在父項中更改時獲取子項中的更新值。

為此，您需要在可觀察類型的服務中聲明變量。 您的myService.service.ts將具有以下代碼：

@Injectable()
export class myService {
myInput:BehaviorSubject<boolean> = new BehaviorSubject(false)
 }

現在從您的父組件中使用以下方法更改此 myInput 的值：

myServie.myInput.next(true)

並使用以下方法在您的子組件中訂閱此變量：

 myService.myInput.subscribe((data)=>{console.log(data)})

在父組件和子組件中，在構造函數的 arguments 中添加行private mySerivce:MyService 。