Это руководство для разработчиков с опытом создания приложений в других фреймворках, которые плохо знакомы с 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); } }