今天完成的事：对更多的指令进行了解，继续解析*ngif的条件和*ngif的使用

明天要完成的事：

难题：按照师兄的说法和我的理解ngif是有3种以上的判断方式：但是如何写出正确合理的条件很重要；条件怎么写还是很懵逼：

收获：

*ngif绑定的真值假值概念昨天理解是这个值在之前存不存在：

<div class="msgBox" #msgBox>12333</div>

<button (click)="submit($event)">确定</button>

1

2

import { Component, ElementRef, ViewChild } from '@angular/core'

export class ViewChild {

  @ViewChild('msgBox') msgBox: ElementRef

  submit(e){

    console.log(this.msgBox.nativeElement)

  }

}

（获取dom的元素，）

变更检测器会在视图的DOM中查找能匹配上该选择器的第一个元素或指令。如果视图的DOM发生了变化，出现了匹配该选择器的新的子例程，该属性就会被更新。

在之前angular2并没有把它当读放出来作为一类，现在释放出来单独坐一类，

元数据属性：

• 选择器 -用于查询的指令类型或名字。

• 阅读 -从查询到的元素中读取另一个令牌。

• 静态 -是否在更改检测运行之前解析查询结果（即仅返回静态结果）。如果未提供此选项，则编译器将退回到其默认行为，即使用查询结果来确定查询解析的时间。如果任何查询结果在嵌套视图中（例如* ngIf），则将在运行更改检测后解决查询。否则，将在运行更改检测之前解决该问题。

所支持的选择器包括：

• 任何带有或装饰器的类@Component@Directive

• 官方形式的模板引用变量（某些可以使用来查询@ViewChild('cmp')<my-component #cmp></my-component>

• 组件树中任何当前组件的子组件所定义的提供商（例如）@ViewChild(SomeService) someService: SomeService

• 任何通过字符串令牌定义的提供商（某种）@ViewChild('someToken') someTokenVal: any

• TemplateRef（可以比如用来查询）@ViewChild(TemplateRef) template;<ng-template></ng-template>

由此获得第一个元素或者指令

NgClass 

从HTML元素上添加和可移除CSS类。

NgModule 

：commonmodule

<some-element [ngClass]="'first second'">...</some-element>

<some-element [ngClass]="['first', 'second']">...</some-element>

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>

<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

再使用ngclass时必须要用到的@Directive

selector：这个CSS选择器用于模板中标记出该指令，并触发该指令的实例化。

@Directive(

{ selector: 'child-dir',

1.  exportAs: 'child'
2. })
3. class ChildDir {
4. }

1. export class ViewChildComp {
2.  @ViewChild(Pane, {static: false})
3.  set pane(v: Pane) {
4.    setTimeout(() => { this.selectedPane = v.id; }, 0);
5.  }
6.  selectedPane: string = '';
7.  shouldShow = true;
8.  toggle() { this.shouldShow = !this.shouldShow; }
9. }

@Input()
ngIf: any    ：  只写。    布尔表达式，将其作为显示模板的条件进行评估

@Input()
ngIfThen: TemplateRef<NgIfContext>  ：只写。     显示条件表达式是否为true的模板

@Input()
ngIfElse: TemplateRef<NgIfContext>  ：只写。     显示条件表达式是否为假的模板

后面师兄仔细的看了一下我的问题，跟我说了一些关于ngif的东西，感觉其实ngif还是很容易理解的，

不过师兄真变态这理解能力，

然后的就是ngfor了这个关联的东西比较多，涉及到声明一个数组（数据）然后根据这个数据数组循环重新渲染创建内容（数据和一些其他内容）

这个ngfor也算是结构指令和常用模块吧，学起来有点浮躁了