Это руководство для разработчиков с опытом создания приложений в других фреймворках, которые плохо знакомы с Angular 2 и пытаются понять его архитектурные шаблоны. Мы собираемся сосредоточиться на компонентах и ​​на том, как они взаимодействуют с остальной частью приложения. Есть и другие способы сделать это; это мое мнение о лучших, учитывая мое текущее понимание.

Компоненты

Это строительные блоки приложения: автономные системы, обычно включающие контроллер (класс компонента) и представление, заданное шаблоном.

Компонент обычно включается другими родительскими компонентами путем ссылки на его селектор в родительском шаблоне.

@Component({
  selector: 'product'
})
<!-- inside some other component's template: -->
<product></product>

Двусторонняя привязка предоставляется Angular для общедоступных свойств контроллера.

export class ProductComponent {
  public name: string;
}
<!--
when the input's value changes, the component's name property is updated, and vice versa, via 2-way binding
-->
<input ([ngModel])="name" />

Входы и выходы

Это один из способов взаимодействия компонентов друг с другом. Поскольку входы и выходы явно связывают компоненты, их лучше всего использовать, когда дочерний компонент никогда не будет существовать вне этого конкретного контекста — композиция, а не агрегация, в классических терминах ООП.

Входные данные отображаются как свойства компонента, а также как поток событий изменения.

export class ProductComponent implements OnChanges {
  @Input isFeatured: boolean;

  ngOnChanges(changes: SimpleChanges) {
    // receives a stream of changes to any inputs, e.g. when
    // localValueOfFeatured changes in the parent (see below)
  }
}
<product [isFeatured]="localValueOfFeatured"></product>

Выходные данные предоставляются родительскому элементу через поток событий.

@Component({
 template: `<button (click)="like()">Like</button>`
})
export class ProductComponent {
  @Output onLike = new EventEmitter<boolean>();
 
  like() {
    this.onLike.emit(true);
  }
}
<product (onLike)="handleLikesInParentComponent($event)"></product>

Услуги

Это другой способ перемещения данных в компоненты и из них. В более общем смысле сервисы — это модульные объекты, которые Angular волшебным образом внедряет по запросу. Они могут взаимодействовать с другими внедренными в них сервисами, а также публиковать собственные потоки данных. Возможно, наиболее распространенным примером является служба Http, которая позволяет нам делать исходящие запросы к веб-службам.

В контексте межкомпонентной связи службы являются лучшим выбором, чем входы и выходы, когда источник или назначение потока данных не важны для компонента. Каждый компонент зависит от службы, отвечающей за эту линию связи, а не друг от друга.

@Component({
 template: `<button (click)="like()">Like</button>`
})
export class ProductComponent {
  private product: Product;  // a model object
 
  // request injection of the service
  constructor (private productLikeService: ProductLikeService) {}
 
  like() {
    this.productLikeService.publish(this.product);
  }
}
export class ProductLikeService {
  this.subject = new Subject<Product>();
 
  subscribe() {
    return this.subject.asObservable();
  }
 
  publish(product: Product) {
    // any consumers of this service will receive the product
    this.subject.next(product);
  }
}