Angular6笔记（5）

1.构造函数——构造函数是当类进行实例化时执行的特殊函数。通常会在构造函数中对新对象进行初始化工作： 

构造函数必须命名为constructor。因为构造函数是在类被实例化时调用的，所以它们可以 有输入参数，但不能有任何返回值。我们要通过调用new ClassName()来执行构造函数，以完成类的实例化。 

PS:在TypeScript中，每个类只能有一个构造函数。

2. 继承：面向对象的另一个重要特性就是继承：

继承表明子类能够从父类得到它的行为。然后，我们就可以在这个子类中重写、修改以及添加行为。 继承是TypeScript的核心语法，用extends关键字实现。 

3.胖箭头函数的应用实例：

var nate = {
    name:"Nate",
    guitars:["Gibson","Martin","Taylor"],
    printGuitars: function() {
       var self = this;
       this.guitars.forEach(function(g){
          // this.name is undefined so we have to use self.name 
          console.log(self.name + "plays a" + g);
       });
     }
};

由于胖箭头会共享环绕它的外部代码的this，所以可以这样改写：

var nate = {
   name = "Nate",
   guitars: ["Nate","Martin","Taylor"],
   printGuitars: function(){
       this.guitars.forEach((g) => {
         console.log(this.name + "plays a" + g);
    });
  }
};

可见，箭头函数是处理内联函数的好办法。这也让我们在JavaScript中更容易使用高阶函数。

4.字符串插值（ES6中引入的新的模板字符串语法）：

1.字符串中使用变量：

var firstName = "Nate"; var lastName = "Murray"; 
 // interpolate a string 
var greeting = `Hello ${firstName} ${lastName}`;   // 字符串插值必须使用反引号
console.log(greeting);

2.多行字符串：

var template = `
  <div>
   <h1>Hello</h1>
     <p>This is a great website</p>
  </div>
`

5.控制开始时间在结束时间之前：

假使页面上有两个输入时间的时间控件：“开始时间”和“结束时间”，要控制开始时间始终在结束时间之前，则在日期控件中做如下控制：

1、如果先选择开始时间，则“结束时间”控件中，在开始时间之前的时间都置灰；（在标签中使用 [nzDisabledDate]属性来控制）

2、如果先选择结束时间，则“开始时间”控件中，在结束时间之后的时间都置灰；

首先要在页面的两个时间控件中添加 [nzDisabledDate]属性：

<div nz-col [nzSpan]="8">
   <nz-form-item nzFlex>
   <nz-form-label nz-col [nzRequired]="!isReadOnly" [nzSpan]="6" nzFor="_productStime">开始时间</nz-form-label>
   <nz-form-control nz-col [nzSpan]="18">
    <nz-date-picker [nzDisabledDate]="disabledStartDate" nzShowTime 
      formControlName="_productStime" [nzFormat]="'yyyy-MM-dd HH:mm:ss'" 
      (ngModelChange)="onDateChange($event,'1')" nzPlaceHolder="请选择开始时间" 
      [nzDisabled]="isReadOnly">
    </nz-date-picker>
    <nz-form-explain 
 *ngIf="getFormControl('_productStime')?.dirty&&getFormControl('_productStime')?.hasError('required')">这是必填字段</nz-form-explain>
   </nz-form-control>
  </nz-form-item>
</div>
            
<div nz-col [nzSpan]="8">
  <nz-form-item nzFlex>
  <nz-form-label nz-col [nzRequired]="!isReadOnly" [nzSpan]="6" nzFor="_productEtime">结束时间</nz-form-label>
  <nz-form-control nz-col [nzSpan]="18">
    <nz-date-picker [nzDisabledDate]="disabledEndDate" nzShowTime 
      formControlName="_productEtime" [nzFormat]="'yyyy-MM-dd HH:mm:ss'"
     (ngModelChange)="onDateChange($event,'2')" nzPlaceHolder="请选择结束时间" 
     [nzDisabled]="isReadOnly">
    </nz-date-picker>
     <nz-form-explain *ngIf="getFormControl('_productEtime')?.dirty&&getFormControl('_productEtime')?.hasError('required')">这是必填字段</nz-form-explain>
    </nz-form-control>
   /nz-form-item>
</div>

可以看到两个字段的[nzDisabledDate]属性分别绑定到了两个方法上，方法中写不可选日期的条件：

 /* 结束日期在开始日期之后 */
  disabledStartDate = (_productStime: Date): boolean => {
       if (!_productStime || !this.validateForm.controls._productEtime.value) {
          return false;
           }
     return _productStime.getTime() > this.validateForm.controls._productEtime.value;
   }

  disabledEndDate = (_productEtime: Date): boolean => {
     if (!_productEtime || !this.validateForm.controls._productStime.value) {
          return false;
           }
    return _productEtime.getTime() <= this.validateForm.controls._productStime.value;
  }

6.组件的输入——inputs配置项：

inputs接收一个字符串数组，用来指定输入的键（名称），当我们为组件指定了一个输入时，这个组件的定义类就一定要有一个实例属性来接收这个输入的值。例如，假设我们有以下代码： 

    @Component({       
       selector: 'my-component',      
       inputs: ['name', 'age']     
       })     
    class MyComponent {       
       name: string;       
       age: number;     
       } 

指定组件接收一个输入参数的另一种方式是使用@Input注解。你可以先导入Input，然后把 @Input()添加到属性声明上，代码如下： 

@Component({   
    selector: 'my-component' 
   }) 
 class MyComponent {   
    @Input() name: string;   
    @Input() age: number; 
   } 

7.微语法解析器：

Angular会把星号语法*ngFor的template属性转换成<ng-template>元素：

举例：<p *myUnless="myExpression">...</p>

*符号把当前元素变成一个嵌入式模板。相当于：  <ng-template [myUnless]="myExpression">   <p>...</p> </ng-template>

<!-- 星号是一个用来简化更复杂语法的“语法塘”,把当前元素变成一个嵌入式模板 -->
<div *ngFor="let hero of heroes; let i=index; let odd=odd; trackBy:TrackById"
  [class.odd]="odd">({{i}}){{hero.name}}</div>

<!-- *ngFor="..."翻译成一个template属性 template="ngFor ..." -->
<div template="ngFor let hero of heroes; let i=index; let odd=odd; trackBy:TrackById"
  [class.odd]="odd">({{i}}){{hero.name}}</div>

<!-- 把*ngFor星号语法的template属性转换成<ng-template>元素 -->
<ng-template ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd" 
  [ngForTrackBy]="trackById">
       <div [class.odd]="odd">({{i}}){{hero.name}}</div>
</ng-template>