diff --git a/packages/common/src/directives/ng_if.ts b/packages/common/src/directives/ng_if.ts index 9bcab1d949..43ebade8df 100644 --- a/packages/common/src/directives/ng_if.ts +++ b/packages/common/src/directives/ng_if.ts @@ -12,78 +12,153 @@ import {Directive, EmbeddedViewRef, Input, TemplateRef, ViewContainerRef, ɵstri /** * Conditionally includes a template based on the value of an `expression`. * + * 根据 `expression` 表达式的值,有条件的包含某个模板。 + * * `ngIf` evaluates the `expression` and then renders the `then` or `else` template in its place * when expression is truthy or falsy respectively. Typically the: + * + * `ngIf` 会对 `expression` 进行求值,如果为真,则在原地渲染 `then` 模板,否则渲染 `else` 模板。通常: + * * - `then` template is the inline template of `ngIf` unless bound to a different value. + * + * `then` 模板就是 `ngIf` 中内联的模板 —— 除非你指定了另一个值。 + * * - `else` template is blank unless it is bound. * + * `else` 模板是空白的 —— 除非你另行指定了。 + * * ## Most common usage * + * ## 常见用法 + * * The most common usage of the `ngIf` directive is to conditionally show the inline template as * seen in this example: + * + * `ngIf` 指令最常见的用法是根据条件显示其内联模板,比如: + * * {@example common/ngIf/ts/module.ts region='NgIfSimple'} * * ## Showing an alternative template using `else` * + * ## 通过 `else` 显示另一个模板 + * * If it is necessary to display a template when the `expression` is falsy use the `else` template * binding as shown. Note that the `else` binding points to a `` labeled `#elseBlock`. * The template can be defined anywhere in the component view but is typically placed right after * `ngIf` for readability. * + * 如果 `expression` 为假时有必要显示一个模板,就可以用上述的 `else` 模板来进行绑定。 + * 注意,`else` 绑定指向的是一个带有 `#elseBlock` 标签的 `` 元素。 + * 该模板可以定义在此组件视图中的任何地方,但为了提高可读性,通常会放在 `ngIf` 的紧下方。 + * * {@example common/ngIf/ts/module.ts region='NgIfElse'} * * ## Using non-inlined `then` template * + * ## 使用非内联的 `then` 模板 + * * Usually the `then` template is the inlined template of the `ngIf`, but it can be changed using * a binding (just like `else`). Because `then` and `else` are bindings, the template references can * change at runtime as shown in this example. * + * 通常,`then` 模板就是 `ngIf` 的内联模板,不过你也可以通过绑定机制(就像 `else` 那样)来修改它。 + * 因为 `then` 和 `else` 都是绑定,因此可以在运行期间改变这个模板引用 —— 如下例所示。 + * * {@example common/ngIf/ts/module.ts region='NgIfThenElse'} * * ## Storing conditional result in a variable * + * ## 把条件结果保存在变量中 + * * A common pattern is that we need to show a set of properties from the same object. If the * object is undefined, then we have to use the safe-traversal-operator `?.` to guard against * dereferencing a `null` value. This is especially the case when waiting on async data such as * when using the `async` pipe as shown in following example: * + * 一种常见的需求模式为:我们要显示来自同一个对象的一组属性。如果该对象是 undefined,那么我们就不得不使用安全遍历操作符 `?.` 来防止引用到空对象。 + * 尤其是在使用 `async` 管道等待异步数据时,例如: + * * ``` * Hello {{ (userStream|async)?.last }}, {{ (userStream|async)?.first }}! * ``` * * There are several inefficiencies in the above example: + * + * 上面这个例子中有一系列低效代码: + * * - We create multiple subscriptions on `userStream`. One for each `async` pipe, or two in the * example above. + * + * 我们在 `userStream` 上创建了多个订阅。每个 `async` 管道都有一个,比如上面这个例子中就用了两个。 + * * - We cannot display an alternative screen while waiting for the data to arrive asynchronously. + * + * 在等待异步数据到来的时候,我们没法显示一个备用视图(如 loading)。 + * * - We have to use the safe-traversal-operator `?.` to access properties, which is cumbersome. + * + * 我们不得不使用安全遍历操作符 `?.` 来访问属性,太繁琐了。 + * * - We have to place the `async` pipe in parenthesis. * + * 我们不得不把 `async` 管道放进圆括号里。 + * * A better way to do this is to use `ngIf` and store the result of the condition in a local * variable as shown in the the example below: * + * 更好的方式是使用 `ngIf`,并把该条件的结果存到局部变量里,例如: + * * {@example common/ngIf/ts/module.ts region='NgIfAs'} * * Notice that: + * + * 注意: + * * - We use only one `async` pipe and hence only one subscription gets created. + * + * 我们只用了一个 `async` 管道,因此也只会进行一次订阅。 + * * - `ngIf` stores the result of the `userStream|async` in the local variable `user`. + * + * `ngIf` 把 `userStream|async` 的结果保存在了局部变量 `user` 中。 + * * - The local `user` can then be bound repeatedly in a more efficient way. + * + * 局部变量 `user` 可以反复绑定 —— 这很高效。 + * * - No need to use the safe-traversal-operator `?.` to access properties as `ngIf` will only * display the data if `userStream` returns a value. + * + * 不需要使用安全遍历操作符 `?.` 来访问属性,因为 `ngIf` 只有在 `userStream` 有数据时才会显示内容。 + * * - We can display an alternative template while waiting for the data. * + * 在等待数据到达时,我们可以显示一个代用模板。 + * * ### Syntax * + * ### 语法 + * * Simple form: + * + * 简单形式: + * * - `
...
` * - `
...
` * * Form with an else block: + * + * 带有 `else` 块的形式: + * * ``` *
...
* ... * ``` * * Form with a `then` and `else` block: + * + * 带有 `then` 和 `else` 块的形式: + * * ``` *
* ... @@ -91,6 +166,9 @@ import {Directive, EmbeddedViewRef, Input, TemplateRef, ViewContainerRef, ɵstri * ``` * * Form with storing the value locally: + * + * 保存到局部变量的形式: + * * ``` *
{{value}}
* ...