在按钮单击时将反应形式值传递给另一个组件答案

【问题标题】：Passing reactive form value to another component on button click in angular在按钮单击时将反应形式值传递给另一个组件
【发布时间】：2020-11-07 10:14:43
【问题描述】：

我有两个组件（RegisterComponent 和 Subscription），第一个组件（RegisterComponent）包含一个具有三个值（名字、姓氏、电子邮件）的反应式表单和按钮注册。我想点击注册按钮并重定向到订阅并显示用户的名字、姓氏和电子邮件。注册组件.html

<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
    <div class="form-group">
            <label class="float-left">firstName</label>
            <input type="text" formControlName="firstName" class="form-control" />
     </div>
     <div class="form-group">
            <label class="float-left">lastName</label>
            <input type="text" formControlName="lastName" class="form-control" />
     </div>
     <div class="form-group">
            <label class="float-left">email</label>
            <input type="text" formControlName="email" class="form-control" />
     </div>
  </form>

注册组件.ts

registerForm: FormGroup;
constructor(private formBuilder: FormBuilder,private router: Router) {
}
ngOnInit(): void {
this.registerForm = this.formBuilder.group({
  firstName: [''],
  lastName: [''],
  email: ['']
 });
 onSubmit() {
   this.router.navigate(['/Subscription']);
 }

订阅组件.html

<div>
    Here i want to display the firstname,lastname and email of user
</div>

app-routing.module.ts

{ path: "register", component: RegisterComponent },
{ path: "subscription", component:SubscriptionComponent}

当我单击按钮并显示它时，如何将表单值传递给我的订阅组件。

【问题讨论】：

您可以为此使用共享服务。在您的注册组件中设置服务中的数据，您可以在订阅组件中检索它

标签： javascript angular typescript

【解决方案1】：

有多种方法可以将数据从一个组件传递到另一个组件。

Angular 允许我们向路由传递数据。数据可以是静态的或动态的。

如果您只想传递 3 个值，请遵循以下解决方案：-

registercomponent.ts

onSubmit() {

 const firstname = this.registerForm.get('firstname').value;
 const lastname = this.registerForm.get('lastname').value;
 const email = this.registerForm.get('email').value;

 this.router.navigate(['/Subscription' , firstname, lastname, email]);
}

app-routing.module.ts

{ path: "subscription/:firstname/:lastname/:email", component:SubscriptionComponent}

然后通过订阅组件中的参数获取值。

subscriptioncomponent.ts

constructor(private route: ActivatedRoute){}

ngOnInit(){

this.route.params.subscribe(params=>{
 this.firstname = params['firstname'];
 this.lastname = params['lastname'];
 this.email = params['email'];
})
 
}

【讨论】：

【解决方案2】：

在 onSubmit 函数中更改导航函数的参数列表，如下所示

onSubmit() {
    this.router.navigate(['/Subscription', this.registerForm.value]);
}

//like, this.router.navigate(['/Subscription', {fName: firstName, lName: //lastName, email: email}]);

确保 this.registerForm.value 为 JSON 格式。在订阅组件中，您可以从 URL 中获取所需的值，如下所示

this.route.paramMap.subscribe(
    params => {
        this.fName = params.get('fName');
        this.lName = params.get('lName');
        this.email = params.get('email');
    });

【讨论】：

【解决方案3】：

您可以使用history.state 将自定义状态传递给任何导航。 navigate 方法有第二个参数NavigationExtras。

注册组件.ts

onSubmit(): void {
  this.router.navigate(['/subscription'], {
    state: this.registerForm.value // <-- set custom-defined state here
  });
}

订阅组件.ts

ngOnInit(): void {
  const { firstname, lastname, email } = history.state
}

【讨论】：