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();

  // ???
}

???评论是问题所在。当local的{{1}}属性设置为Location时，我想明确将true的{{1}}属性设置为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);
  }
}

parent.component.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提供程序中注册服务，并将其注入项目和位置组件。他们可以通过服务进行沟通。

Answer 2

回答你的问题：我的选择是什么？

如果您想与组件通信，有2个选项

1：使用@Input和@Output

@Input：当您想要将数据从父组件传递到子组件
时
@Output：当您想要将数据从子传递到父
时

2：使用服务：

在父级别使用提供者服务，以及其他子组件可以访问具有相同状态的相同服务

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

2 个答案:

location.component.ts

parent.component.ts：