angular5的基本代码段或者语句 语法汇总

显示数据

 

    
  
 {{ hero.name }} 

 

There are many heroes!


插值表达式
My current hero is {{currentHero.name}}

  {{title}}
  

The sum of 1 + 1 is {{1 + 1}}

Save
{{hero.name}}

 

   ... 
 

数据绑定是一种机制
#1 从数据源到视图目标，一般用于插值表达式 Property Attribute 类 样式
{{expression}}
[target]="expression"
bind-target="expression"
#2 从视图目标到数据源，一般用在事件
(target)="statement"
on-target="statement"
#3 双向
[(target)]="expression"
bindon-target="expression"


HTML attribute 与 DOM property 的对比  https://angular.cn/guide/template-syntax
模板绑定是通过 property 和事件来工作的，而不是 attribute。在 Angular 的世界中，attribute 唯一的作用是用来初始化元素和指令的状态。 当进行数据绑定时，只是在与元素和指令的 property 和事件打交道，而 attribute 就完全靠边站了。
把这个思维模型牢牢的印在脑子里，接下来，学习什么是绑定目标。

数据绑定的目标是 DOM 中的某些东西。 这个目标可能是（元素 | 组件 | 指令的）property、（元素 | 组件 | 指令的）事件，或(极少数情况下) attribute 名。 下面是的汇总表
#1 绑定元素的 property  组件的 property   指令的 property


 

 
#2 绑定 元素的事件  组件的事件  指令的事件
Save

 

 
  click me
 
#3  双向绑定 事件与 property

#4  绑定attribute（例外情况）
help
#5  绑定 class property

 
  Special
 
#6 绑定style property





属性绑定
# 绑定image 元素的src属性到组件的heroImageUrl属性值（heroImageUrl就是对应类的一个成员变量）

# 绑定按钮的disable属性
Cancel is disabled
# 设置指令的属性

 
  [ngClass] binding to the classes property
 
# 设置自定义组件的模型属性（这是父子组件之间通讯的重要途径）

 
不要忘了方括号 ，比如这个就是错的 
 

我们通常得在插值表达式和属性绑定之间做出选择
在多数情况下，插值表达式是更方便的备选项。 实际上，在渲染视图之前，Angular 把这些插值表达式翻译成相应的属性绑定。
当要渲染的数据类型是字符串时，没有技术上的理由证明哪种形式更好。 我们倾向于可读性，所以倾向于插值表达式。
但数据类型不是字符串时，就必须使用属性绑定了。
假设下面的恶意内容  evilTitle = 'Template Syntax';  幸运的是，Angular 数据绑定对危险 HTML 有防备。 在显示它们之前，它对内容先进行消毒。 不管是插值表达式还是属性绑定，都不会允许带有 script 标签的 HTML 泄漏到浏览器中。




attribute、class 和 style 绑定
考虑 ARIA， SVG 和 table 中的 colspan/rowspan 等 attribute。 它们是纯粹的 attribute，没有对应的属性可供绑定。如果想写出类似下面这样的东西，会报错

# Three-Four  我们需要 attribute 绑定来创建和绑定到这样的 attribute

 
  
  
  
  
   
    One-Two
    
    
   
    Five
    Six
    
  
 

# 不用绑定直接设置 attribute 时是这样的：

 

 
  Bad curly special
 

#可以把它改写为绑定到所需 CSS 类名的绑定；这是一个或者全有或者全无的替换型绑定。 （译注：即当 badCurly 有值时 class 这个 attribute 设置的内容会被完全覆盖）

 

 
  Bad curly
 

# 还可以绑定到特定的类名。 当模板表达式的求值结果是真值时，Angular 会添加这个类，反之则移除它。

 

 
  The class binding is special
 

 

 
  This one is not so special
 


# 通过样式绑定，可以设置内联样式。样式绑定的语法与属性绑定类似。 但方括号中的部分不是元素的属性名，而由style前缀，一个点 (.)和 CSS 样式的属性名组成。 形如：[style.style-property]
Red
Save
# 有些样式绑定中的样式带有单位。在这里，以根据条件用 “em” 和 “%” 来设置字体大小的单位。
Big
Small
# 注意，样式属性命名方法可以用中线命名法，像上面的一样 也可以用驼峰式命名法，如fontSize



内置属性型指令
# 属性型指令会监听和修改其它HTML元素或组件的行为、元素属性（Attribute）、DOM属性（Property）。 它们通常会作为HTML属性的名称而应用在元素上。
#  很多Angular模块，比如RouterModule和FormsModule都定义了自己的属性型指令。 本节将会介绍几个最常用的属性型指令：
    NgClass - 添加或移除一组CSS类
    NgStyle - 添加或移除一组CSS样式
    NgModel - 双向绑定到HTML表单元素

# 你既可以在初始化时调用setCurrentClassess()，也可以在所依赖的属性变化时调用。

 
  This div is initially saveable, unchanged, and special
 

currentClasses: {};
setCurrentClasses() {
  // CSS classes: added/removed per current state of component properties
  this.currentClasses =  {
    'saveable': this.canSave,
    'modified': !this.isUnchanged,
    'special':  this.isSpecial
  };
}


# 我们可以根据组件的状态动态设置内联样式。 NgStyle绑定可以同时设置多个内联样式

 
  
  This div is initially italic, normal weight, and extra large (24px).

 


currentStyles: {};
setCurrentStyles() {
  // CSS styles: set per current state of component properties
  this.currentStyles = {
    'font-style':  this.canSave      ? 'italic' : 'normal',
    'font-weight': !this.isUnchanged ? 'bold'   : 'normal',
    'font-size':   this.isSpecial    ? '24px'   : '12px'
  };
}

#  ngModel指令通过自己的输入属性ngModel和输出属性ngModelChange隐藏了很多细节 替我们做很多事情

比如输入框内容变成大写  
# 使用 ngModel 时需要 FormsModule  在使用ngModel指令进行双向数据绑定之前，我们必须导入FormsModule并把它添加到Angular模块的imports列表中
import { NgModule } from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // <--- JavaScript import from Angular

/* Other imports */

@NgModule({
  imports: [
    BrowserModule,
    FormsModule  // <--- import into the NgModule
  ],
  /* Other module metadata */
})
export class AppModule { }





内置结构型指令
结构型指令的职责是HTML布局。 它们塑造或重塑DOM的结构，这通常是通过添加、移除和操纵它们所附加到的宿主元素来实现的。
# NgIf 指令  可以往DOM中添加或从DOM中移除这个元素

 
# ngIf指令 通常会用来防范空指针错误。

 
  Hello, {{currentHero.name}}
 

 
  Hello, {{nullHero.name}}
 

# NgFor是一个重复器指令 —— 自定义数据显示的一种方式。 我们的目标是展示一个由多个条目组成的列表。

 
  {{hero.name}}
 

 
# 带索引的*ngFor  https://angular.cn/api/common/NgForOf

 
  {{i + 1}} - {{hero.name}}
 


# NgSwitch指令类似于JavaScript的switch语句。 它可以从多个可能的元素中根据switch条件来显示某一个。 Angular只会把选中的元素放进DOM中
# NgSwitch实际上包括三个相互协作的指令：NgSwitch、NgSwitchCase 和 NgSwitchDefault，例子如下：

 
  
  
  
  
  
  
  
  

 



# 模板引用变量 ( #var )
# 声明一个名叫phone的变量来引用元素

#之后 我们可以在模板中的任何地方引用模板引用变量


 

 
Call
# 模板引用变量 (#phone) 和*ngFor部分看到过的模板输入变量 (let phone) 是不同的。 要了解详情，参见结构型指令一章。
# 模板引用变量的作用范围是整个模板。 不要在同一个模板中多次定义同一个变量名，否则它在运行期间的值是无法确定的。
# 我们也可以用ref-前缀代替#。 下面的例子中就用把fax变量声明成了ref-fax而不是#fax。




管道操作符 ( | )
# 在绑定之前，表达式的结果可能需要一些转换。例如，可能希望把数字显示成金额、强制文本变成大写，或者过滤列表以及进行排序。 
# Angular 管道对像这样的小型转换来说是个明智的选择。 管道是一个简单的函数，它接受一个输入值，并返回转换结果。 它们很容易用于模板表达式中，只要使用管道操作符 (|) 就行了。

 
  Title through uppercase pipe: {{title | uppercase}}
 
# json管道对调试绑定特别有用：

 
  {{currentHero | json}}
 

#安全导航操作符 ( ?. ) 和空属性路径
The null hero's name is {{nullHero && nullHero.name}}
# 简单点就是

 
The null hero's name is {{nullHero?.name}}