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

Question

嗨，我正试图将一个变量从一个组件传递到另一个组件，我尝试了以下操作:

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

现在在我的另一个页面，我想接收它，但只是在ts文件，而不是html，因为它将用于内部逻辑。

我试过了，但是没有成功:

@Input() userFlow: boolean;

Answer 1

以下方法可能对您有用!

在receiver组件typescript中，您必须创建一个方法来接收userFlow变量的值，如下所示:

export class ReceiverComponent {
constructor() { }
userFlow:boolean;
receiveBooleanValue($event) {
this.userFlow= $event
}
}

在receivercomponent html中添加以下内容:

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

在sender组件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

可以在sender component .ts文件中添加

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

在接收组件.ts文件中添加

userFlow = history.state.data;

确保导入router