Angular

1. 典型的 Angular Route 具有两个属性：

   • path: 用来匹配浏览器地址栏中 URL 的字符串。

   • component: 导航到该路由时，路由器应该创建的组件

2. • 带有双花括号的插值 (interpolation) 来显示一个组件属性。

   • 用 ngFor 显示数组。

   • 用一个 TypeScript 类来为你的组件描述模型数据并显示模型的属性。

   • 用 ngIf 根据一个布尔表达式有条件地显示一段 HTML

3. Angular 提供了多种数据绑定方式。绑定类型可以分为三类，按数据流的方向分为：

   • 从数据源到视图  {{expression}}    [target]="expression"    bind-target="expression"
     

   • 从视图到数据源  (target)="statement"    on-target="statement"
     

   • 双向：视图到数据源到视图  [(target)]="expression"   bindon-target="expression"
     

4. Angular获取DOM节点的方式

   1.<div id="box1" >this is box1</div>
   
   对应Ts文件获取节点
   let oBox1:any=document.getElementById("box1");
       oBox1.style.color="red";

   2.<div #myBox>
       this is a box 
   </div>
   
   对应Ts文件获取节点
   @ViewChild('myBox') mybox:any;//获取dom 节点   #myBox
   this.mybox.nativeElement.style.width="100px";

   同时，对于DOM节点的操作尽量放在ngAfterViewInit()

5. Angular 的 CSS 类绑定机制让根据条件添加或移除一个 CSS 类变得很容易。 只要把 [class.some-css-class]="some-condition" 添加到你要施加样式的元素上就可以了。

   <li *ngFor="let hero of heroes " (click)="onSelect(hero)" [class.selected]="hero === selectedHero">

   上述代码的意义是，当hero === selectedHero时，为li添加类名为selected。在css文件里配置selected类的样式即可。

6. 组件不应该直接获取或保存数据，它们不应该了解是否在展示假数据。 它们应该聚焦于展示数据，而把数据访问的职责委托给某个服务。