PROSAGA码农传奇-EAAS/NFV-在Angular5中从服务获取数据到响应式表单的最佳方法

在Angular5中从服务获取数据到响应式表单的最佳方法

作者: 木木
发布时间: 2024-03-17 02:47:51 (3月前)
转自：

<div class =“post-text”itemprop =“text”>
  
    您可以在组件内部订阅，也可以创建一个在完成后发出值的主题。
  
  
    订阅组件内部
  
   <pre>
 <code>
 @Injectable()
export class UserService {

private user: User;

private url: string = 'v1/user';

constructor(private restService: RestService) {}

public getUser() {
    return this.restService.get(this.url);
}

</code>
 </pre>
  
    在component.ts中
  
   <pre>
 <code>
 export class UserComponent implements OnInit {

private form: FormGroup;
    userSub: Subscription;
    user: string;
constructor(
    private userService: UserService
) {}

ngOnInit(): void {
   userSub = this.userService.getUser()
     .subscribe( (res) => { 
        this.user = res;
         // Initalize the empty form
        this.form = new FormGroup({
            'email': new FormControl(this.user, [])
             })
        );
     });

}

</code>
 </pre>
  <HR />
  
    订阅服务对象
  
   <pre>
 <code>
 @Injectable()
export class UserService {
userRetrieved: new Subject<User>();
private user: User;

private url: string = 'v1/user';

constructor(
    private restService: RestService

) {
    this.restService.get(this.url).subscribe(
        (res) => {
            this.user = res;
            this.userRetrieved.next(this.user);
        }
    );

}

public getUser(): User {
    return this.user;
}

</code>
 </pre>
  
    然后在您的组件中订阅它
  
   <pre>
 <code>
 export class UserComponent implements OnInit {
userSub: Subscription;
private form: FormGroup;

constructor(
    private userService: UserService
) {}

ngOnInit(): void {
    // Initalize the empty form
    this.form = new FormGroup({
            email: new FormControl()
        })
    );
    this.userSub = this.userService.userChanged
       .subscribe((res: User ) => { 
        //Code to update and Fill the form with values from the service
        // this.form.patchValue(res);
       });

}

</code>
 </pre>
</DIV>