Угловой 6: Как связать реквизит между 2 объектами?(сервисный и местный)

Question

Я использую сервис с объектом:

@Injectable({
  providedIn: 'root'
})
export class MyService{
  public myObject: AClass;

  constructor() {
    this.myObject= new AClass();
  }
}

Я внедрил это в некоторые компоненты.

один из них является родительским, а остальные - дочерними.Я не хочу использовать @Input () и @Output (), потому что в дочерних компонентах много реквизита.

В каждом дочернем конструкторе у меня есть это:

public localObject;

constructor(myService: MyService) {
    this.localObject = myService.myObject
}

localObjectиспользуется в html, например:

<input [(value)]="localObject.name" /> и т.д ...

проблема в следующем:

если в родительском я обновляю модель сервиса (после вызова API или чего-то ещееще), localObjects от детей не обновляются.(без привязки) и значение "" не изменяется.

Answer 1

Лучше будет использовать Subject/BehaviorSubject или какой-нибудь наблюдаемый

Один подход будет похож на

@Injectable({
  providedIn: 'root'
})
export class MyService{
  public subjectOne;
  public myObject: AClass;

  constructor() {
    this.myObject= new AClass();
    this.subjectOne = new BehaviorSubject<AClass>(this.myObject);
  }
}

public localObject;

constructor(myService: MyService) {
    myService.subjectOne.subscribe(data => this.localObject = data);
}

changeHandler(event: Event) {
    myService.subjectOne.next(event.target.value);
}

<input [value]="localObject.name" (change)="changeHandler($event)" />

И аналогично для объектных мест вы подписываетесь на эту тему и слушаете измененияили широковещательные изменения

Answer 2

Начните с добавления модификатора доступа к вашей сервисной зависимости:

Public

constructor(public myService: MyService) {}

<input [(value)]="myService.myObject.name" />

Private

constructor(private myService: MyService) {}
get myObject() { return this.myService.myObject; }

<input [(value)]="myObject.name" />