今天完成的事情

了解的了一下微信小程序，还是现在别看了，熟悉了Angular 再看吧。

明天计划的事情

应该把所有的任务都提交一下。再看看Angular怎么发布到线上，昨天弄的好像不行。

遇到的问题

Angular应用build出来据说是可以直接发布到线上的，也不知道为什么不行，很尴尬。

收获

组件样式ngClass熟属性：
ngClass 指令接收一个对象字面量，对象的 key 是 CSS class 的名称，value 的值是 truthy/falsy 的值，表示是否应用该样式。

@Component({
selector: 'app-simple-form',
template: `
  <div>
   {{message}}
   <input #myInput 
    type="text" 
    [(ngModel)]="message"
    [ngClass]="{mousedown: isMousedown}"
    (mousedown)="isMousedown = true"
    (mouseup)="isMousedown = false"
    (mouseleave)="isMousedown = false"
    >
   <button (click)="update.emit({text: message})">更新</button>
  </div>
`,
styles: [`
 :host { margin: 10px; }
 
 .mousedown { border: 2px solid green; }
 
 input:focus { font-weight: bold; outline: none;}
`
]
})
export class SimpleFormComponent implements OnInit {
isMousedown: boolean;
// ...
}

ngClass的用法：

<!-- 使用布尔值 -->
<div [ngClass]="{bordered: false}">This is never bordered</div>
<div [ngClass]="{bordered: true}">This is always bordered</div>
<!-- 使用组件实例的属性 -->
<div [ngClass]="{bordered: isBordered}">
   Using object literal. Border {{ isBordered ? "ON" : "OFF" }}
</div>
<!-- 样式名包含'-' -->
<div[ngClass]="{'bordered-box': false}">
   Class names contains dashes must use single quote
</div>
<!-- 使用样式列表 -->
<div class="base" [ngClass]="['blue', 'round']"> 
  This will always have a blue background and round corners
</div>

使用 ngStyle 指令
ngStyle 指令让我们可以方便得通过 Angular 表达式，设置 DOM 元素的 CSS 属性。

<div [ngStyle]="{color: 'white', 'background-color': 'blue'}">
 Uses fixed white text on blue background
</div>

需要注意的是， background-color 需要使用单引号，而 color 不需要。这其中的原因是，ng-style 要求的参数是一个 Javascript 对象，color 是一个有效的 key，而 background-color 不是一个有效的 key ，所以需要添加 ''。
对于一些场合，我们也可以直接利用 Angular 属性绑定的语法，来快速设置元素的样式。

<!--- 设置背景颜色 --->
<div [style.background-color="'yellow'"]>
  Use fixed yellow background
</div> 
<!--- 设置字体大小 --->
<!-- 支持单位: px | em | %-->
<div>
   <span [ngStyle]="{color: 'red'}" [style.font-size.px]="fontSize">
      Red Text
   </span>
</div>