速查表
Cheat Sheet
引導/啟動 Bootstrapping |
|
---|---|
platformBrowserDynamic().bootstrapModule(AppModule); | 用 Bootstraps the app, using the root component from the specified |
NgModules |
|
---|---|
| 定義一個模組,其中可以包含元件、指令、管道和服務提供者。 Defines a module that contains components, directives, pipes, and providers. |
| 屬於當前模組的元件、指令和管道的列表。 List of components, directives, and pipes that belong to this module. |
| 本模組所匯入的模組列表 List of modules to import into this module. Everything from the imported modules is available to |
| 那些匯入了本模組的模組所能看到的元件、指令和管道的列表 List of components, directives, and pipes visible to modules that import this module. |
| 依賴注入提供者的列表,本模組以及本模組匯入的所有模組中的內容都可以看見它們。 List of dependency injection providers visible both to the contents of this module and to importers of this module. |
entryComponents: [SomeComponent, OtherComponent] | 任何未在可達範本中參考過的元件列表,比如從程式碼中動態建立的。 List of components not referenced in any reachable template, for example dynamically created from code. |
| 當本模組啟動時,隨之啟動的元件列表。 List of components to bootstrap when this module is bootstrapped. |
範本語法 Template syntax | |
---|---|
| 把 Binds property |
| 把屬性(Attribute) Binds attribute |
| 根據 Binds the presence of the CSS class |
| 把 CSS 樣式屬性 Binds style property |
| 當這個按鈕元素(及其子元素)上的 click 事件觸發時,呼叫方法 Calls method |
| 把一個屬性繫結到插值字串(如"Hello Seabiscuit")。這種寫法等價於 Binds a property to an interpolated string, for example, "Hello Seabiscuit". Equivalent to: |
| 把文字內容繫結到插值字串(如"Hello Seabiscuit") Binds text content to an interpolated string, for example, "Hello Seabiscuit". |
| 設定雙向繫結。等價於 Sets up two-way data binding. Equivalent to: |
| 建立一個區域性變數 Creates a local variable |
| 這個 The |
| 使用名叫 Transforms the current value of expression |
| 安全導航運算子( The safe navigation operator ( |
| 範本中的 SVG 片段需要給它的根元素加上 An SVG snippet template needs an |
| 以 An |
內建指令 Built-in directives |
|
---|---|
| 根據 Removes or recreates a portion of the DOM tree based on the |
| 把 li 元素及其內容變成一個範本,並使用這個範本為列表中的每一個條目實例化一個檢視。 Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list. |
| 根據 Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of |
| 根據 map 中的 value 是否為真,來決定該元素上是否出現與 name 對應的 CSS 類別。右側的表示式應該返回一個形如 Binds the presence of CSS classes on the element to the truthiness of the associated map values. The right-hand expression should return {class-name: true/false} map. |
| 允許你使用 CSS 為 HTML 元素指定樣式。你可以像第一個例子那樣直接使用 CSS,也可以呼叫元件中的方法。 Allows you to assign styles to an HTML element using CSS. You can use CSS directly, as in the first example, or you can call a method from the component. |
表單 Forms |
|
---|---|
| 為表單控制元件提供雙向資料繫結、解析和驗證功能。 Provides two-way data-binding, parsing, and validation for form controls. |
類別裝飾器 Class decorators |
|
---|---|
| 宣告一個類別是元件,並提供該元件的元資料。 Declares that a class is a component and provides metadata about the component. |
| 宣告一個類別是指令,並提供該指令的元資料。 Declares that a class is a directive and provides metadata about the directive. |
| 宣告一個類別是管道,並提供該管道的元資料。 Declares that a class is a pipe and provides metadata about the pipe. |
| 宣告某個類別可以註冊為提供者,並能被另一個類別注入。如果沒有該裝飾器,編譯器就不會產生足夠的元資料,當它被注入到別處時,就無法正常建立該類別。 Declares that a class can be provided and injected by other classes. Without this decorator, the compiler won't generate enough metadata to allow the class to be created properly when it's injected somewhere. |
指令配置項 Directive configuration |
|
---|---|
| 指定一個 CSS 選擇器,用於在範本中標記出該指令。支援的選擇器型別包括: Specifies a CSS selector that identifies this directive within a template. Supported selectors include 但不支援指定父子關係的選擇器。 Does not support parent-child relationship selectors. |
| 該指令及其子指令的依賴注入提供者列表。 List of dependency injection providers for this directive and its children. |
元件配置項 Component configuration |
|
---|---|
| 如果設定了,那麼 If set, the |
| 依賴注入提供者列表,但它們的範圍被限定為當前元件的檢視。 List of dependency injection providers scoped to this component's view. |
| 當前元件檢視的內聯範本或外部範本的 URL。 Inline template or external template URL of the component's view. |
| 用於為當前元件的檢視提供樣式的內聯 CSS 或外部樣式表 URL 的列表。 List of inline CSS styles or external stylesheet URLs for styling the component’s view. |
給指令和元件使用的類別屬性配置項 Class field decorators for directives and components |
|
---|---|
| 宣告一個輸入屬性,你可以透過屬性繫結來更新它,如 Declares an input property that you can update via property binding (example: |
| 宣告一個輸出屬性,它發出事件,你可以用事件繫結來訂閱它們(如: Declares an output property that fires events that you can subscribe to with an event binding (example: |
| 把宿主元素的一個屬性(這裡是 CSS 類別 Binds a host element property (here, the CSS class |
| 用指令或元件上的 Subscribes to a host element event ( |
| 把元件內容查詢( Binds the first result of the component content query ( |
| 把元件內容查詢( Binds the results of the component content query ( |
| 把元件檢視查詢( Binds the first result of the component view query ( |
| 把元件檢視查詢( Binds the results of the component view query ( |
指令與元件的變更檢測與生命週期鉤子 Directive and component change detection and lifecycle hooks | (作為類別的方法實現。) (implemented as class methods) |
---|---|
| 在任何其它生命週期鉤子之前呼叫。可以用它來注入依賴項,但不要在這裡做正事。 Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here. |
| 每當輸入屬性發生變化時就會呼叫,但位於處理內容( Called after every change to input properties and before processing content or child views. |
| 在呼叫完建構函式、初始化完所有輸入屬性並首次呼叫過 Called after the constructor, initializing input properties, and the first call to |
| 每當對元件或指令的輸入屬性進行變更檢測時就會呼叫。可以用它來擴充套件變更檢測邏輯,執行自訂的檢測邏輯。 Called every time that the input properties of a component or a directive are checked. Use it to extend change detection by performing a custom check. |
|
Called after |
| 每當元件或指令的內容( Called after every check of the component's or directive's content. |
| 當 Called after |
| 當元件的檢視及其子檢視或指令所屬的檢視每次執行變更檢測時呼叫。 Called after every check of the component's views and child views / the view that a directive is in. |
| 只在實例被銷燬前呼叫一次。 Called once, before the instance is destroyed. |
依賴注入配置項 Dependency injection configuration | |
---|---|
| 把 Sets or overrides the provider for |
| 把 Sets or overrides the provider for |
| 把 Sets or overrides the provider for |
路由與導航 Routing and navigation |
|
---|---|
| 為該應用配置路由。支援靜態、引數化、重新導向和萬用字元路由。也支援自訂路由資料和解析(resolve)函式。 Configures routes for the application. Supports static, parameterized, redirect, and wildcard routes. Also supports custom route data and resolve. |
| 標記出一個位置,用來載入活動路由的元件。 Marks the location to load the component of the active route. |
| 使用路由體系建立一個到其它檢視的連結。路由體系由路由路徑、必要引數、可選引數、查詢引數和文件片段組成。要導航到根路由,請使用 Creates a link to a different view based on a route instruction consisting of a route path, required and optional parameters, query parameters, and a fragment. To navigate to a root route, use the |
| 當 The provided classes are added to the element when the |
| 用來定義類別的介面。路由器會首先呼叫本介面來決定是否啟用該路由。應該返回一個 An interface for defining a class that the router should call first to determine if it should activate this component. Should return a boolean|UrlTree or an Observable/Promise that resolves to a boolean|UrlTree. |
class CanDeactivateGuard implements CanDeactivate<T> { | 用來定義類別的介面。路由器會在導航離開前首先呼叫本介面以決定是否取消啟用本路由。應該返回一個 An interface for defining a class that the router should call first to determine if it should deactivate this component after a navigation. Should return a boolean|UrlTree or an Observable/Promise that resolves to a boolean|UrlTree. |
class CanActivateChildGuard implements CanActivateChild { | 用來定義類別的介面。路由器會首先呼叫本介面來決定是否啟用一個子路由。應該返回一個 An interface for defining a class that the router should call first to determine if it should activate the child route. Should return a boolean|UrlTree or an Observable/Promise that resolves to a boolean|UrlTree. |
| 用來定義類別的介面。路由器會在渲染該路由之前,首先呼叫它來解析路由資料。應該返回一個值或能解析成值的 An interface for defining a class that the router should call first to resolve route data before rendering the route. Should return a value or an Observable/Promise that resolves to a value. |
| 用來定義類別的介面。路由器會首先呼叫它來決定是否應該載入一個延遲載入模組。應該返回一個 An interface for defining a class that the router should call first to check if the lazy loaded module should be loaded. Should return a boolean|UrlTree or an Observable/Promise that resolves to a boolean|UrlTree. |