如何在angular2+中将动态数据从父级传递给子级

Question

As we know, in angular parent to child communication happened using @Input decorator but how to pass dynamic data from parent to child.for example 'name' property is defined in parent and it's value changes dynamically and updated value of 'name' we are going to using in child component so how to achieve it without services.

Answer 1

you can watch your input changes in the child component with ngOnChanges lifecycle

in your child component you should 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

You can make the use of service to get the updated value in child when it gets changed in parent.

For that you need to declare the variable in the service of type observable. your myService.service.ts would be having the following code:

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

now from your parent component change the value of this myInput by using:

myServie.myInput.next(true)

and subscribe this variable in your child component by using:

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

In both the parent and child component add the line private mySerivce:MyService in the arguments of constructor.