详解Angular结构型指令模块和样式

一，结构型指令

*是一个语法糖,<a *ngif=”user.login”>退出</a>相当于

<ng-template [ngif]=”user.login”>

</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
}"

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>

使用ngstyle在拖拽的时候调整顺序

原理就是动态指定flex容器样式的order为list模型对象里的order。

1、在taskhome中给app-task-list添加order

list-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结构型指令模块和样式的详细内容，更多关于angular结构型指令模块和样式的资料请关注www.887551.com其它相关文章！

黄山市民网：https://www.huangshanshimin.com/