在 angular 10 中将变量从一页传递到另一页

Question

Hi I am trying to pass a variable from one component to another, I tried the following:

  @Output() public userFlow = new EventEmitter<boolean>();
  this.userFlow.emit(this.userFlowThrough);

Now in my other page I want to receive it but just in the ts file and not the html as it will be used for internal logic.

I tried this but it did not work:

 @Input() userFlow: boolean;

Answer 1

Following approach might be useful for you!

In the receiver component typescript, you have to create a method to receive the value of the userFlow variable like this:

export class ReceiverComponent {

constructor() { }

userFlow:boolean;

receiveBooleanValue($event) {
  this.userFlow= $event
 }
}

In receiver component html put the following:

<app-sender (booleanValueEvent)="receiveBooleanValue($event)"></app-sender>
<h1>{{userFlow}}<h1>

In the sender component typescript ( app-sender selector), you should declare a booleanValueEvent variable with the @Output() decorator and set it equal to a new event emitter.

  export class SenderComponent {

  userFlow: boolean = true;

  @Output() booleanValueEvent = new EventEmitter<boolean>();

  constructor() { }

  ngOnInit(): void {
    this.booleanValueEvent.emit(this.userFlow)
  }
}

Answer 2

In sender component.ts file you can add

sendData(){
    this.router.navigate(['receiverComponent'],{state:{data:this.userFlow}})
}

In receiver component.ts file add

userFlow = history.state.data;

Make sure to import router