Как заставить обнаружение изменений на наблюдаемой функции родного брата?

Question

У меня есть два компонента братьев и сестер.Одним из них является форма, где вы можете создать новую заметку.Второй - UI-контейнер всех заметок.До сих пор они были в одном компоненте, и когда я отправлял новую заметку, эта заметка сразу же отображалась в пользовательском интерфейсе.

Теперь, когда они разделены, пользовательский интерфейс не может обнаружить изменение новой заметки.Что странно, потому что компонент пользовательского интерфейса имеет функцию Observable, которая должна правильно определять изменения?

Я прочитал кое-что об обнаружении изменений в компонентах, но мне не удалось заставить его работать.

Оба компонента используют один и тот же сервис для получения и обновления заметок.

Я могу получитьэто работает, если бы я установилInterval на компонент пользовательского интерфейса.Но это все еще не мгновенно и определенно не очень хорошая практика.

Компонент формы

insertLog() {
   this._logsService.insertLog(this.newLog)
    .then((res: any) => {
      if (res.message = 'Log has been succesfully added.') {
        this._notificationService.showNotification('Log has been added!');
        // Force change detection on logs-container component somehow
         // this._logsService.getAllLogs(); <-- this doesn't work

       } 
      }
     });
  }

Компонент пользовательского интерфейса, который должен обнаруживать изменения

getLogs() {
    this.currentShowbtn = 0;
    this._logsService.getAllLogs(this.userIdofCurrent)
      .subscribe((res) => {
        this.logs = res;
         for (let i = 0; i < this.logs.length; i++) {
          this.logs[i].weekStart = this.getDateOfWeek(this.logs[i].week, 2017);
          this.logs[i].weekEnd = this.getEndingDateOfWeek(this.logs[i].week, 2017);

        }
      });
    }

Общая служба

 getAllLogs(id) {
    return this._http.post('/api/logs', id)
      .map(result => this.result = result.json().data);
  }

Возможно, если бы я мог вызвать getLogs из компонента-брата, это бы сработало.А можно я?А я должен?Есть ли какой-нибудь способ, как сказать Observable обновить себя?

Answer 1

Вы можете использовать вывод для компонента формы:

@Output() formSave: EventEmitter<boolean> = new EventEmitter();

В родительском шаблоне:

<your-form-component (formSave)="onFormSaved()"></your-form-component>

В родительском компоненте:

uiData: any;
onFormSaved() {
   uiData = loadNewDataSomehow();
}

И в пользовательском интерфейсекомпонент:

@Input() data: any;

и в родительском шаблоне:

<your-ui-component [data]="uiData"></your-ui-component>

Answer 2

Вы можете использовать что-то вроде этого

@Injectable()
export class LogService {

    private logs: BehaviorSubject<any>;

    constructor() {
        this.logs = new BehaviorSubject([]);
    }

    add(log: any) {
        this.logs.next(log);
    }

    getAllLogs(): BehaviorSubject<any> {
        return this.logs;
    }
}

Имейте в виду, что BehaviorSubject сохраняет только последнее значение, существуют также другие типы для субъектов, если вы хотите, чтобы все значения были инициированы для подписчика, но, поскольку вы хотите, чтобы только что было добавлено новое значение, BehaviorSubject должно быть хорошо.