如何以角度 2 将动态数据从 parent 传递到 child

Question

我们知道，在 angular parent 到 child 中使用 @Input 装饰器进行通信，但是如何将动态数据从 parent 传递到 child.for示例 'name' 属性在 parent 中定义，它的值动态变化并更新我们将在 child 组件中使用的 '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)})

在父组件和子组件中，在构造函数的参数中添加行private mySerivce:MyService。

如何以角度 2 将动态数据从 parent 传递到 child

how to pass dynamic data from parent to child in angular2+

javascript

data-binding

angular

angular6