如何在Angular 8中的另一个组件中显示表单提交？

我正在学习Angular，我试图在一个与表单实际不同的组件中显示提交的表单数据

我就是这样设置我的应用程序的：我在一个组件中构建了表单，创建了一个用户模型，创建了一个应该提供跨组件交互的服务，并创建了一个输出组件。 结构如下所示：

应用程序组件文件夹

html、ts、css；app.module等文件

home-form.component文件夹

home form.component.hmtl、ts、css文件

输出组件文件夹

output.component.html、ts、css文件

共享文件夹

user-module.ts，user-data.service.ts

这是我目前的代码：

这是我的用户模型

export class User {
    public name: string;
    public surname: string;
    public gender: string;
    public email: string;

    constructor(name: string, surname: string, gender: string, email: string) {
      this.name = name;
      this.surname = surname;
      this.gender = gender;
      this.email = email;
    }
  }

表单组件的HTML

<div class="container">
  <form class="mt-5" (ngSubmit)="onSubmit()" #myForm="ngForm">
    <div class="row d-flex justify-content-center">

      <div class="col-md-6">
        <label for="name">Name</label>
        <input 
          type="text" 
          id="name" 
          class="form-control" 
          placeholder="start typing here..." 
          ngModel 
          name="name"
          required
          #name="ngModel">
        <span class="help-block text-danger" *ngIf="!name.valid && name.touched">*Please, enter a valid name</span>
      </div>

      <div class="col-md-6">
        <label for="surname">Surname</label>
        <input 
          type="text" 
          id="surname" 
          class="form-control" 
          placeholder="start typing here..." 
          ngModel 
          name="surname"
          required
          #surname="ngModel">
          <span class="help-block text-danger" *ngIf="!surname.valid && surname.touched">*Please, enter a valid surname</span>
      </div>

      <div class="col-md-6 mt-2">
        <label for="gender">Gender</label>
        <div class="form-check form-check-inline d-block">
          <input 
              class="form-check-input" 
              type="radio" 
              name="gender" 
              id="maleGender" 
              value="male" 
              ngModel
              required>
          <label class="form-check-label" for="inlineRadio1">Male</label>
        </div>
        <div class="form-check form-check-inline">
          <input 
            class="form-check-input" 
            type="radio" 
            name="gender" 
            id="femaleGender" 
            value="female" 
            ngModel
            required>
          <label class="form-check-label" for="inlineRadio2">Female</label>
        </div>
      </div>

      <div class="col-md-6 mt-2">
        <label for="email">E-mail</label>
        <input 
          type="email" 
          id="email" 
          class="form-control" 
          placeholder="start typing here..." 
          ngModel 
          name="email"
          required
          email
          #email="ngModel">
          <span class="help-block text-danger" *ngIf="!email.valid && email.touched">*Please, enter a valid e-mail</span>
      </div>

      <div class="mt-5">
        <button 
          type="submit" 
          class="btn btn-primary"
          [disabled]="!myForm.valid">Submit</button>
      </div>

    </div>
  </form>
</div>

import { Component, OnInit, ViewChild, } from '@angular/core';
import { userDataService } from '../shared/user-data.service';
import { NgForm } from '@angular/forms';
import { User } from '../shared/user.model';

@Component({
  selector: 'app-home-form',
  templateUrl: './home-form.component.html',
  styleUrls: ['./home-form.component.css'],
  providers: [userDataService]
})

export class HomeFormComponent implements OnInit {


 @ViewChild('myForm', { static: false }) userForm: NgForm;    
  constructor(private userData: userDataService) {}    
  ngOnInit() {}

  onSubmit(){
    const newUser = new User(this.userForm.value['name'], this.userForm.value['surname'], this.userForm.value['gender'], this.userForm.value['email']);
    this.userData.addUser(newUser);
  }
}

然后是用户数据服务

import { User } from './user.model';
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable()

export class userDataService {

    private myUser = new Subject<User>();
    myUserObservable = this.myUser.asObservable();

    addUser(user: User){
        this.myUser.next(user);
        //console.log(user);      
    }
}

实施Ngondestory以取消订阅。 log只是测试数据是否到达的一种方法，我想通过字符串插值显示数据。诸如此类

<div class="container">
<div class="row">
    <div class="col-md-12">
        <h3>You've created your profile!</h3>
        <p>Name: {{ user.name }}</p>
        <p>Surname: {{ user.surname }}</p>
        <p>Gender: {{ user.gender }}</p>
        <p>E-mail: {{ user.email }}</p>
    </div>
</div>

我真的很感激任何帮助和建议，因为我真的被困在这里了。

---

谢谢大家!

问题在于您注入了两个不同的userDataService实例——每个组件一个

从组件装饰器中删除提供程序：[userDataService]。你可以在 因此，您的组件装饰器应该如下所示：

@Component({
  selector: 'app-home-form',
  templateUrl: './componentname.html',
  styleUrls: ['./componentname.css']
})

userDataService的InActable装饰器应该如下所示

@注射的{ providedIn:'根' } 导出类userDataService{

---

在这种情况下，您的服务将作为一个单独的组件注入到您的任何组件中

正是这样。您只需要保留一个服务实例，就可以将其用作共享服务。因此，基本上在每个组件中提供服务会为同一服务创建不同的实例。我不知道，谢谢大家。现在可以正常工作了我没有使用providedIn，我只是在app.module.ts文件中提供了服务，并自动提供给所有组件。特别感谢您提供了有用的链接；

@Component({
  selector: 'app-home-form',
  templateUrl: './componentname.html',
  styleUrls: ['./componentname.css']
})