相关推荐：《angular教程》
一，结构型指令
*是一个语法糖,退出相当于
退出
避免了写ng-template。
alarm
结构型指令为什么能改变结构？
ngIf源码
set方法标记为@Input，如果条件为真而且不含view的话，把内部hasView标识位置为true然后通过viewContainer根据template创建一个子view。
条件不为真就用视图容器清空所含内容。
viewContainerRef：容器，指令所在的视图的容器
二，模块Module
什么是模块？独立功能的文件集合，用来组织文件。
模块元数据
entryComponents:进入模块就要立刻加载的（比如对话框），而不是调用的时候加载。
exports:模块内部的想要让大家公用，一定要export出来。
forRoot()是什么?
imports: [RouterModule.forRoot(routes)],
imports: [RouterModule.forChild(route)];
这本书给出了一份关于python这门优美语言的精要的参考。作者通过一个完整而清晰的入门指引将你带入python的乐园，随后在语法、类型和对象、运算符与表达式、控制流函数与函数编程、类及面向对象编程、模块和包、输入输出、执行环境等多方面给出了详尽的讲解。如果你想加入 python的世界，David M beazley的这本书可不要错过哦。 (封面是最新英文版的,中文版貌似只译到第二版)
其实forRoot和forChild是两个静态工厂方法。
constructor(guard: any, router: Router);
/**
* Creates a module with all the router providers and directives. It also optionally sets up an
* application listener to perform an initial navigation.
*
* Options (see `ExtraOptions`):
* * `enableTracing` makes the router log all its internal events to the console.
* * `useHash` enables the location strategy that uses the URL fragment instead of the history
* API.
* * `initialNavigation` disables the initial navigation.
* * `errorHandler` provides a custom error handler.
* * `preloadingStrategy` configures a preloading strategy (see `PreloadAllModules`).
* * `onSameUrlNavigation` configures how the router handles navigation to the current URL. See
* `ExtraOptions` for more details.
* * `paramsInheritanceStrategy` defines how the router merges params, data and resolved data
* from parent to child routes.
*/
static forRoot(routes: Routes, config?: ExtraOptions): ModuleWithProviders;
/**
* Creates a module with all the router directives and a provider registering routes.
*/
static forChild(routes: Routes): ModuleWithProviders;
} 元数据根据不同情况会变化，元数据没办法动态指定，不写元数据，直接构造一个静态的工程方法，返回一个Module。
写一个forRoot()
创建一个serviceModule:$ ng g m services
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
@NgModule({
declarations: [],
imports: [
CommonModule
]
})
export class ServicesModule { }ServiceModule里面的元数据不要了。用一个静态方法forRoot返回。
import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
@NgModule()
export class ServicesModule {
static forRoot(): ModuleWithProviders{
return {
ngModule: ServicesModule,
providers:[]
}
}
}在core Module中导入的时候使用
imports: [ServicesModule.forRoot();]
三，风格定义
ngClass,ngStyle和[class.yourclass]
ngClass：用于条件动态指定样式类，适合对样式做大量更改的情况。预先定义好class。
ngStyle：用于条件动态指定样式，适合少量更改的情况。比如下面例子中[ngStyle]="{'order':list.order}"。key是一个字符串。
[class.yourclass] ：[class.yourclass] = "condition"直接对应一个条件。这个condition满足适合应用这个class。等价于ngClass的写法，相当于是ngClass的变体，简写。
{{item.desc}}1,使用ngStyle在拖拽的时候调整顺序。
原理就是动态指定flex容器样式的order为list模型对象里的order。
1、在taskHome中给app-task-list添加order
list-container是一个flex容器，它的排列顺序是按照order去排序的。
2、list数据结构里需要有order，所以增加order属性
lists = [ { id: 1, name: "待办", order: 1, tasks: [ { id: 1, desc: "任务一： 去星巴克买咖啡", completed: true, priority: 3, owner: { id: 1, name: "张三", avatar: "avatars:svg-11" }, dueDate: new Date(), reminder: new Date() }, { id: 2, desc: "任务一： 完成老板布置的PPT作业", completed: false, priority: 2, owner: { id: 2, name: "李四", avatar: "avatars:svg-12" }, dueDate: new Date() } ] }, { id: 2, name: "进行中", order:2, tasks: [ { id: 1, desc: "任务三： 项目代码评审", completed: false, priority: 1, owner: { id: 1, name: "王五", avatar: "avatars:svg-13" }, dueDate: new Date() }, { id: 2, desc: "任务一： 制定项目计划", completed: false, priority: 2, owner: { id: 2, name: "李四", avatar: "avatars:svg-12" }, dueDate: new Date() } ] } ];3、在list拖拽换顺序的时候，改变order
交换两个srcList和目标list的顺序order
handleMove(srcData,targetList){ switch (srcData.tag) { case 'task-item': console.log('handling item'); break; case 'task-list': console.log('handling list'); const srcList = srcData.data; const tempOrder = srcList.order; srcList.order = targetList.order; targetList.order = tempOrder; default: break; } }更多编程相关知识，请访问：编程视频！！
