【Angular】ComponentがServiceのデータを直接書き換えないようにしたい

Question

前提・実現したいこと

Anguar8にて、ユーザー情報を複数のコンポーネントに提供するUserServiceと、UserServiceを利用するコンポーネントの一つ：ユーザー情報編集画面（UserEditComponent）を作成しています。
編集画面には入力欄と送信ボタンを配置し、送信ボタンをクリックするとUserServiceのユーザー情報を更新するようにしたいです。

発生している問題

編集画面の入力欄でユーザー情報を書き換えると、逐次UserServiceの内容も更新されてしまいます。
ServiceからComponentへのデータの渡し方を修正する？ことで、送信ボタンのクリックまでUserServiceの内容を書き換えない方法がないか探しています。

該当のソースコード

【user.ts】ユーザー名と年齢からなるUserクラスを定義しています。

export class User{
    name: string;
    age: number;
}

【user.service.ts】UserServiceでユーザー情報を保持し、複数のコンポーネントに提供する予定です。

import { Injectable } from '@angular/core';
import { User } from './user';
import { Observable, of } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class UserService {

  user: User = { name: "Tanaka", age: 20 };
  getUser(): Observable<User>{
    return of(this.user);
  }
  
  updateUser(newUser: User){
    this.user = newUser;
  }

  //確認用
  logServiceUser(): void{
    console.log(this.user);
  }

  constructor() { }
}

【user-edit.component.ts】UserServiceから受け取ったユーザー情報をngModelを使ってInput要素にバインドし、編集画面を作成しました。
Input要素の内容を書き換えた後、Submitボタンがクリックされ（＝onClick()が呼ばれ）たタイミングでUserService側の情報を更新したいのですが、実際にはInput要素を書き換えた時点でUserService側のデータも更新されてしまいます（checkServiceUser()関数を使って確認済み）。

import { Component, OnInit } from '@angular/core';
import { User } from '../user';
import { UserService } from '../user.service';

@Component({
  selector: 'app-user-edit',
  template: `
    <input type="text" [(ngModel)]="user.name">
    <input type="number" [(ngModel)]="user.age">
    <button (click)="onClick()">submit</button>
    <button (click)="checkServiceUser()">check</button>
  `
})
export class UserEditComponent implements OnInit {

  user: User;
  getUser(): void{
    this.userService.getUser()
    .subscribe( user => this.user = user );
  }

  onClick(){
    //Submitがクリックされた時点でuserServiceのデータを更新したい。
    this.userService.updateUser(this.user);
  }
  checkServiceUser(){
    console.log("check clicked");
    this.userService.logServiceUser();
  }

  constructor( private userService: UserService ) { }

  ngOnInit() {
    this.getUser();
  }

}

考えたこと

ユーザー情報がサービスからコンポーネントに渡される際、参照渡しで渡されるため、コンポーネント側でのデータ更新が直接サービスに反映されてしまっているのではと考えています。

このままでも「サービスを使った複数コンポーネント間のデータの共有」自体は非常に簡便に行えるのですが、送信ボタンのクリック時に内容確認の処理を挟む等、不都合ある場面が生じそうだと考えます。
また、上記のソースコードはサービスのプロパティをコンポーネントが直接書き換えているように思え、サービスが自身のメソッドでこれを行うように修正の必要があると考えています。

問題意識自体に誤りがある場合（内容確認は別途バリデーションの仕組みを使うべき・別にコンポーネントがサービスのデータを書き換えても問題ない、など）は恐縮ですが、ご指摘いただければ幸いです。

補足情報（FW/ツールのバージョンなど）

Angular: 8.2.14
Node: 12.14.0

Answer 1

こんにちは。
お気づきのようにオブジェクトが参照渡しであるがゆえの事象です。
オブジェクトを生成してメンバをコピーしてはどうでしょうか。

  user: User = new User();

  getUser(): void{

    u:User;

    this.userService.getUser()
    .subscribe( user => u.user = user );

    user.name = u.name.concat();
    user.age = u.age;

  }

※未検証なコードです。

オブジェクトのコピーには lodashユーティリティのcloneDeepメソッドを使用する方法が有ります。ユーティリティはnpmでインストールする必要がありますが。

javascriptでlodashを使ってディープコピーを簡単に行う

ご参考までに。

Comments

[octo]

ありがとうございます！ 必要に応じてlodashの導入も試してみます！