官網：https://angular.io/guide/architecture-components

Before a view is displayed, Angular evaluates the directives and resolves the binding syntax in the template to modify the HTML elements and the DOM, according to your program data and logic. Angular supports two-way data binding, meaning that changes in the DOM, such as user choices, are also reflected in your program data.

view顯示之前，Angular評估頁面模板里的Angular指令，解析綁定信息，修改HTML元素和DOM. Angular支持雙向綁定，這意味著發生在DOM上的修改，比如用戶選擇，也會自動反映到應用程序的數據中。

服務注入

A service class definition is immediately preceded by the @Injectable() decorator. The decorator provides the metadata that allows other providers to be injected as dependencies into your class.

Angular Service的定義通過裝飾器@Injectable()來完成，提供了元數據，以便讓其他provider通過依賴的方式注入。

Module

通過裝飾器@NgModule()定義。一個例子：

@NgModule({declarations: [AppComponent],imports: [BrowserModule,AppRoutingModule],providers: [],bootstrap: [AppComponent] })

包含下列的部分：

• declarations: The components, directives, and pipes that belong to this NgModule.

• imports: Other modules whose exported classes are needed by component templates declared in this NgModule.

• exports: The subset of declarations that should be visible and usable in the component templates of other NgModules.

A root NgModule has no reason to export anything because other modules don’t need to import the root NgModule.

The components that belong to an NgModule share a compilation context.

NgModule和Component的關系是1：N關系，一對多。

In JavaScript each file is a module and all objects defined in the file belong to that module. The module declares some objects to be public by marking them with the export key word. Other JavaScript modules use import statements to access public objects from other modules.

每個JavaScript文件是一個module，所有定義在該文件里的對象都屬于該module. Module使用export關鍵字將對象中的一部分聲明為公有。JavaScript module使用import來導入其他module的公有對象。

Angular libraries

通過@angular前綴聲明Angular libraries.

例子：For example, import Angular’s Component decorator from the @angular/core library like this.

import { Component } from ‘@angular/core’;

Component

看個例子：

• selector: A CSS selector that tells Angular to create and insert an instance of this component wherever it finds the corresponding tag in template HTML. For example, if an app’s HTML contains , then Angular inserts an instance of the HeroListComponent view between those tags.

有點像SAP UI5的index.html里定義的place holder

• templateUrl: The module-relative address of this component’s HTML template. Alternatively, you can provide the HTML template inline, as the value of the template property. This template defines the component’s host view.

Angular模板里的數據綁定語法

記住這張圖：

看個例子：

• {{hero.name}}: 將Component的hero.name property(屬性值)顯示到li標簽里。

• [hero]: The [hero] property binding passes the value of selectedHero from the parent HeroListComponent to the hero property of the child HeroDetailComponent.

將selectedHero的值從HeroListComponent傳遞到HeroDetailComponent的hero屬性去。

• (click): The (click) event binding calls the component’s selectHero method when the user clicks a hero’s name. 當用戶點擊hero的name時，調用component的selectHero方法。

雙向綁定的語法：<input [(ngModel)]=“hero.name”>

Two-way data binding (used mainly in template-driven forms) combines property and event binding in a single notation.

In two-way binding, a data property value flows to the input box from the component as with property binding. The user’s changes also flow back to the component, resetting the property to the latest value, as with event binding.

Angular Directive

Angular templates are dynamic. When Angular renders them, it transforms the DOM according to the instructions given by directives. A directive is a class with a @Directive() decorator.

Angular template是動態的，當模板被渲染時，根據模板里包含的指令來轉換DOM. 一個Angular directive就是一個被@Directive()修飾的class.

Structual directive

Structural directives alter layout by adding, removing, and replacing elements in the DOM.

Structure directive通過對DOM里的元素進行增加，刪除和替換的操作來影響界面布局。

attribute directive

Attribute directives alter the appearance or behavior of an existing element. In templates they look like regular HTML attributes, hence the name.

影響一個已有element的外觀或者行為，在Angular模板里看起來和普通的HTML屬性類似，故得名。

Attribute directive的一個例子：The ngModel directive, which implements two-way data binding, is an example of an attribute directive. ngModel modifies the behavior of an existing element (typically ) by setting its display value property and responding to change events.

<input [(ngModel)]=“hero.name”>

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

總結

以上是生活随笔為你收集整理的Angular component的一个例子的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。