angular - 如果属性更改值，修改另一个组件的属性？

Question

我有一个包含三个组件的 Angular 项目 - 一个项目、一个位置和一个同时使用它们的父项目。它们的定义如下:

item.ts:

export class Item {
  hours: number;
}

item.component.ts:

import { Component, Input } from '@angular/core';
import { Item } from './item';

@Component({
  selector: 'app-item',
  template: `<div>Hours: {{ model.hours }}</div>`
})
export class ItemComponent {
  @Input('item') model: Item;
}

location.ts:

export class Location {
  local: boolean;
}

location.component.ts:

import { Component, Input } from '@angular/core';
import { Location } from './location';

@Component({
  selector: 'app-location',
  template: `<div><input type="checkbox" [(ngModel)]="model.local"></div>`
})
export class ItemComponent {
  @Input('location') model: Location;
}

parent.component.ts:

import { Component } from '@angular/core';
import { Item } from './item';
import { Location } from './location';

@Component({
  selector: 'app-parent',
  template: `
    <app-item [item]="item"></app-item>
    <app-location [location]="location"></app-location>
  `
})
export class ParentComponent {
  item: Item = new Item();
  location: Location = new Location();

  // ???
}

??? 注释是问题所在。当 Location 的 local 属性设置为 true 时，我想显式设置 hours 属性Item 到 8.

我查看了 Angular 文档和许多示例，但无法弄清楚如何在另一个组件中的属性更改时更改另一个组件中的属性。

我有哪些选择？

Answer 1

您可以将 ngModelChange 事件处理程序添加到 location.component.ts 并将事件发送到父组件:

location.component.ts

@Component({
  selector: 'app-location',
  template: `<div><input type="checkbox" [(ngModel)]="model.local" (ngModelChange)="onChange($event)"></div>`
})
export class ItemComponent {
  @Input('location') model: Location;
  @Output('change') change;

  onChange() {
    this.change.emit($event);
  }
}

父组件.ts:

父组件应该监听事件并更新item:

@Component({
  selector: 'app-parent',
  template: `
    <app-item [item]="item"></app-item>
    <app-location [location]="location" (change)="updateItem($event)"></app-location>
  `
})
export class ParentComponent {
  item: Item = new Item();
  location: Location = new Location();

  updateItem(value) {
    item.property = 8;
  }

}

另一种选择是在 parent.component 提供程序中注册服务，并将其注入(inject)项目和位置组件。他们可以通过该服务进行通信。