Code On编辑器

1- This is an working example works fine without using service

2- This is not working when a service is used

//登录组件共享

import { Component, OnInit, Input } from '@angular/core';
import { SignInFormService } from '../../services/sign-in-form-create.service';
import { Auth } from '../../services/auth.service';

@Component({
  selector: 'app-sign-in-form',
  templateUrl: './sign-in-form.component.html',
  styleUrls: ['./sign-in-form.component.css']
})
export class SignInFormComponent implements OnInit {

  constructor(private auth: Auth) { }
  @Input() userType: string;
  ngOnInit() {
    this.createForm();
  }

createForm() {
  this.formGroup = this._formBuilder.group({
      username: '',
      password: ''
  });
}

Answer 1

角度服务是单身人士。如果许多组件使用相同的服务，则这些组件将具有相同的对象引用，因此如果它们使用服务的变量，则它们共享相同的引用。

在您的演示中，您在两个组件中使用相同的FormGroup，因此值会随处更改。

有很多方法可以解决它。

您每次都可以返回FormGroup的新实例，而不是返回存储在您服务中的实例。
如果您想在服务中保留FormGroups，则必须将它们保存在收集和管理实例中。

最好的方法是直接在组件中使用formBuilder而不是服务来避免内存泄漏，否则你将不得不管理你的实例

@Component({
   selector: 'app-sign-in-form',
   templateUrl: './sign-in-form.component.html',
   styleUrls: ['./sign-in-form.component.css']
})
export class SignInFormComponent implements OnInit {

   @Input() userType: string;
   formGroup: FormGroup;

   constructor(
       private formBuilder: FormBuilder
   ) {
   }

   ngOnInit() {
       this.formGroup = this._formBuilder.group({
            username: '',
            password: ''
       });
   }
}

创建一次并重用的表单组件共享相同的服务

Code On编辑器

1 个答案: