Question

我有两个兄弟组件。一个是您可以创建新笔记的表单。第二个是所有笔记的UI容器。到目前为止，我将它们放在一个组件中，当我提交一个新注释时，该注释也立即显示在UI中。

现在它们已经分开，UI无法检测到新笔记的更改。这是奇怪的，因为UI组件具有Observable功能，它应该检测到变化吗？

我读过有关组件间更改检测的内容，但我无法使其正常工作。

两个组件共享相同的服务以获取和更新笔记。

如果我在UI组件上设置setInterval，我可以使用它。但这仍然不是即时的，绝对不是一种好的做法。

表单组件

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

       } 
      }
     });
  }

应检测更改的UI组件

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

你可以使用这样的东西

@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仅保留最后一个值，如果您希望将所有值触发给订阅者，还有其他类型的主题，但是您只需要新插入的值{{1 }} 应该没事。

Answer 2

您可以在表单组件上使用输出：

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

在父模板中：

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

在父组件中：

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

在UI组件中：

@Input() data: any;

在父模板中：

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

如何对兄弟姐妹的可观察功能强制进行变更检测？

2 个答案: