相关推荐：《angular教程》
一，结构型指令
*是一个语法糖,dec5e4d6c96c086f087e44e4daa4227c退出5db79b134e9f6b82c0b36e0489ee08ed相当于
<ng-template [ngif]="user.login"> <a>退出</a></ng-template>
避免了写ng-template。
<ng-template [ngif]="item.reminder"> <mat-icon > alarm </mat-icon> </ng-template> <!-- <mat-icon *ngif="item.reminder"> alarm </mat-icon> -->
结构型指令为什么能改变结构？
ngif源码
set方法标记为@input，如果条件为真而且不含view的话，把内部hasview标识位置为true然后通过viewcontainer根据template创建一个子view。
条件不为真就用视图容器清空所含内容。
viewcontainerref：容器，指令所在的视图的容器
二，模块module
什么是模块？独立功能的文件集合，用来组织文件。
模块元数据
entrycomponents:进入模块就要立刻加载的（比如对话框），而不是调用的时候加载。
exports:模块内部的想要让大家公用，一定要export出来。
forroot()是什么?
imports: [routermodule.forroot(routes)],
imports: [routermodule.forchild(route)];
其实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<routermodule>; /** * creates a module with all the router directives and a provider registering routes. */ static forchild(routes: routes): modulewithproviders<routermodule>;}
元数据根据不同情况会变化，元数据没办法动态指定，不写元数据，直接构造一个静态的工程方法，返回一个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。
<mat-list-item class="container" [@item]="widerpriority" [ngclass]="{ 'priority-normal':item.priority===3, 'priority-important':item.priority===2, 'priority-emergency':item.priority===1}"
<div class="content" mat-line [ngclass]="{'completed':item.completed}"> <span [mattooltip]="item.desc">{{item.desc}}</span></div>
ngstyle：用于条件动态指定样式，适合少量更改的情况。比如下面例子中[ngstyle]="{'order':list.order}"。key是一个字符串。
[class.yourclass] ：[class.yourclass] = "condition"直接对应一个条件。这个condition满足适合应用这个class。等价于ngclass的写法，相当于是ngclass的变体，简写。
<div class="content" mat-line [class.completed]="item.completed"> <span [mattooltip]="item.desc">{{item.desc}}</span></div>
1,使用ngstyle在拖拽的时候调整顺序。
原理就是动态指定flex容器样式的order为list模型对象里的order。
1、在taskhome中给app-task-list添加orderlist-container是一个flex容器，它的排列顺序是按照order去排序的。
<app-task-list *ngfor="let list of lists" class="list-container" app-droppable="true" [droptags]="['task-item','task-list']" [dragenterclass]=" 'drag-enter' " [app-draggable]="true" [dragtag]=" 'task-list' " [draggedclass]=" 'drag-start' " [dragdata]="list" (dropped)="handlemove($event,list)" [ngstyle]="{'order': list.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; } }
更多编程相关知识，请访问：编程视频！！
以上就是详解angular中的结构型指令、模块和样式的详细内容。