Udemy - Angular 8 (formerly Angular 2) - The Complete Guide 笔记

Basics

1. Angular的Component可以反复使用也可以使用在其他Component中， Angular有一个根Component叫做<app-root></app-root>，其他我们生成的Component都需要在该Component内部

2. 可以手动生成Component，但不要忘记在app.modules.ts的declarations中声明(类似于spring中对Component的scan)；也可以用ng generate component<name> 自动生成，则不再需要手动添加声明(确保ng serve在运行)。

3. @Component指明了该组件的配置情况，其中templateUrl指定了该组件的内容(可以不用templateUrl而是使用template，那么此时是在typescript文件中直接写html)，styleUrls和styles起着相同的作用，唯一的区别是style可以有多个css文件。selector很像css的selector，不止可以做为选中元素，也可以做为选中属性( [<attribute>] )或者选中class ( [.<class>] )

   import {
         Component, OnInit } from '@angular/core';
   
   @Component({
        
     selector: 'app-servers',
     templateUrl: './servers.component.html',
     styleUrls: ['./servers.component.css']
   })
   export class ServersComponent implements OnInit {
        
   
     constructor() {
         }
   
     ngOnInit() {
        
     }
   }
   

4. Angular databinding的四种方式
   

   1. String Interpolation：{ { }}写在html文件中，{ { }}中间可以是typescript中声明的变量或函数，只要{ { }}中间最后是一个String类型即可。
   2. Property Binding：改变某个元素的原生属性的值，比如将某个元素的disabled属性绑定到某个布尔变量上。
      <button class="btn btn-primary" [disabled]="!allowNewServer"></button>
   3. Event Binding：当触发绑定的event(比如click event)后，会执行expression。一个很重要的预留关键词是$event，这个关键词代表的是触发该event产生的数据。比如我们可以监听input元素的input event，每当我们改变input元素的内容的时候，我们都可以拿到这个值。
      <input class="form-control" (input)="onUpdataServerName($event)">
   4. Two Way Binding：typescript中变量的改变会改变template上的显示，template上的显示被手动改变也会改变typescript中变量的值。需要加入FormModule这个库。

5. Directives:组件是一个带模板的指令；@Component装饰器实际上就是一个@Directive装饰器，只是扩展了一些面向模板的特性。
   一些angular内置的directives：带*号的是structural directives，structural directives会导致元素的增加或删除，普通的attribute directives不会造成元素的增加或删除，只会改变元素。
   *ngIf：如果判断为真，那么元素存在，如果判断为假，那么该元素不存在(注意与disabled属性的区别，disabled是指元素存在但不可见)。<p *ngIf="getServerStatus()"></p>
   [ngStyle]：attribute directive，他本身是一个directive，我们使用的时候用Property Binding来动态的改变某个元素的style。<p [ngStyle]="{ backgroundColor: getColor() }"></p>
   语法格式是：冒号前面是style名字，冒号后面是一个String，代表该style的属性。
   [ngClass]：动态增加css class。<p [ngClass]="{ Online: getServerStatus==='online' } "></p>
   语法格式是：冒号前面是我们css文件中的某个class，冒号后面是boolean值，可以是表达式或函数，如果boolean为真，那么在该元素上增加该class。
   *ngFor：<p *ngFor="let server of servers; let i = index">{ { server }}</p>
   servers是我们定义的一个javascript array。index是ngFor预留的关键词，可以获取ngFor循环的index。i可以在这个元素中当做变量使用。

6. 一个很重要的问题：两个Component之间如何进行数据的交互。
   Custom Properties & Events：
   
   Native Properties & Events指的是对已有元素的property进行绑定，比如disabled属性。
   Custom Properties & Events for Directives指的是类似*ngFor。
   Custom Properties & Event for Components 用于Component间的数据交互。

   • 父Component传入子Component

     export class ServerElementComponent implements OnInit {
            
       @Input('srvElement')
       element : {
            
         type: string,
         name: string,
         content: string
       }
       constructor() {
             }
       ngOnInit() {
            
       }
     }
     

     使用了input注解之后，我们再使用ServerElementComponent的时候就像之前我们使用disabled属性一样使用element属性了，所以也可以为其绑定数据。<app-server-element *ngFor="let serverElement of serverElements" [srvElement]='serverElement'></app-server-element>
     @Input(alias),如果我们想为property起一个别名，乐意在里面加一个alias，这时候使用的时候就必须要用这个alias。如果不加alias，那么使用的时候就是用他本来的名字(element)。

   • 子Component发射event，父Component接受event(子Component向父Component传数据)
     app.html. <app-cockpit (serverCreated)="onServerAdded($event)" (blueprintCreated)="onBlueprintAdded($event)"></app-cockpit>

     app.ts

     export class AppComponent {
            
       serverElements = [{
            type:'server', name:'test', content:'test'}];
     
       onServerAdded(serverData:{
            serverName: string, serverContent:string}) {