在 angular 10 中將變量從一頁傳遞到另一頁

Question

您好我正在嘗試將變量從一個組件傳遞到另一個組件，我嘗試了以下操作：

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

現在在我的另一個頁面中，我想接收它，但只是在 ts 文件中，而不是在 html 中，因為它將用於內部邏輯。

我試過了，但沒有奏效：

 @Input() userFlow: boolean;

Answer 1

以下方法可能對您有用！

在接收器組件 typescript 中，您必須創建一個方法來接收 userFlow 變量的值，如下所示：

export class ReceiverComponent {

constructor() { }

userFlow:boolean;

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

在接收器組件 html 中放入以下內容：

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

在發送方組件 typescript（ app-sender選擇器）中，您應該使用 @Output() 裝飾器聲明一個 booleanValueEvent 變量並將其設置為新的事件發射器。

  export class SenderComponent {

  userFlow: boolean = true;

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

  constructor() { }

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

Answer 2

在發件人 component.ts 文件中，您可以添加

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

在接收器 component.ts 文件中添加

userFlow = history.state.data;

確保導入路由器