angular 动态组件类型详解(四种组件类型)

组件类型1：纯函数功能，而没有视图部分，即Factory(类似于$http)

promise.component.html

常见的有内置的$http，$q之类的。一般使用promise与作用域进行交互

组件类型2：不是常驻于视图，而是动态插入的、有UI的一类组件，有输入交互、不常被调用(类似于Model对话框)

factory.component.html

并发性。这里收到es6的启发。在factory内使用了构造函数，来区分不同的实例。当然，factory接口返回的类型要根据需求来定：仅仅是一个promise?还是返回一整个组件的实例

数据驱动。factory内部我使用了this.scope = $rootScope.$new()。并把每个实例的模板和作用域进行绑定$compile(html())(scope)。感谢毛总，这招真是方便。我们能够真正使用到angular的精髓：用数据来驱动我们的视图了

交互。该demo因为需要与用户进行交互，因此返回了一个promise给调用者。当然实际要看情况。

作用域。由于该组件并不常常需要被调用，因此一旦组件'close'(从视图上消失)，就scope.$destroy()、instance.remove()

组件类型3：不常驻于视图，但会被经常调用，而且是动态插入的、无输入交互、有UI的一类组件(类似于popover)

factory.component2.html

对比。与上类型组件对比，该类组件更容易被调用(类似于微信右上角的popover)
并发性。要求更高，稍复杂。因此返回组件的实例，让开发者可用调用组件内部的方法(open/close/...)。同时，鉴于需求特殊性，在open()方法处我传入了$event作为UI参数

作用域。由于是隐藏地常驻与视图，因此只当路由切换时才注销实例。scope.$watch('$stateChangeSuccess', function(){scope.destroy()})

组件实例。赋值给作用域的变量 $scope.instance = Mypop.init()

组件类型4：实例之间存在某种关系、不常驻于视图，动态插入、只有视觉交互、有UI的一类组件(类似于ant design的Notification)

factory.component.3.html

对比。与上类组件对比，组件的每个实例之间需要存在某种队列关系，具体操作方法请参考上面的例子。

实例关系。如何维护实例之间的关系？笔者比较笨的方法是开启另一个factory实例，存放一个实例数据，来维护实例之间的关系var _sl = scope.list = []。然后该factory具备操作实例队列的一些方法 _sl.push(token)或者 _sl.shift()。同时每个实例都会监听这个实例队列 _s.$watchCollection('instanceList', function(){...})

赞 (0)

相关推荐

  • 详解Angular 4.x 动态创建组件

    动态创建组件 这篇文章我们将介绍在 Angular 中如何动态创建组件. 定义 AlertComponent 组件 首先,我们需要定义一个组件. exe-alert.component.ts import { Component, Input } from '@angular/core'; @Component({ selector: "exe-alert", template: ` <h1>Alert {{type}}</h1> `, }) export cl

  • Angular 4根据组件名称动态创建出组件的方法教程

    Angular 4根据组件名称动态创建出组件的方法教程

    一.理解angular组件 组件是一种特殊的指令,使用更简单的配置项来构建基于组件的应用程序架构,这样他能简单地写app,通过类似的web Component 或者angular2的样式.web Component 是一个规范.马上就要成为标准. 应用组件的优点: 比普通指令配置还简单 提供更好的默认设置和最好的实践 对基于组建的应用架构更优化. 对angular2的升级更平滑. 不用组建的情况: 对那些在 compile或者pre-link阶段要执行操作的指令,组件不能用,因为无法到达那个阶段

  • Angular.js实现动态加载组件详解

    前言 有时候需要根据URL来渲染不同组件,我所指的是在同一个URL地址中根据参数的变化显示不同的组件:这是利用Angular动态加载组件完成的,同时也会设法让这部分动态组件也支持AOT. 动态加载组件 下面以一个Step组件为示例,完成一个3个步骤的示例展示,并且可以通过URL user?step=step-one 的变化显示第N个步骤的内容. 1.resolveComponentFactory 首先,还是需要先创建动态加载组件模块. import { Component, Input, Vie

  • 动态创建Angular组件实现popup弹窗功能

    起步: 直接使用ngIf 把弹窗的DOM直接放在页面底下隐藏,通过ngIf这样的指令控制其显示. 改进: 封装成angular模块,通过服务控制其显示 直接使用ngIf的话,让人不爽的地方就在于不够通用,每个页面都得加DOM.改进的话可以把比较通用的一些DOM封装成组件,统一添加到全局页面中,并将显示的控制交给一个angular服务来控制其显示. 比如定义了两个组件(DialogComponent, AlertComponent),将他们都添加到AppComponent下,然后提供一个Popup

  • angular 动态组件类型详解(四种组件类型)

    组件类型1:纯函数功能,而没有视图部分,即Factory(类似于$http) promise.component.html 常见的有内置的$http,$q之类的.一般使用promise与作用域进行交互 组件类型2:不是常驻于视图,而是动态插入的.有UI的一类组件,有输入交互.不常被调用(类似于Model对话框) factory.component.html 并发性.这里收到es6的启发.在factory内使用了构造函数,来区分不同的实例.当然,factory接口返回的类型要根据需求来定:仅仅是一

  • Spring详解四种加载配置项的方法

    Spring详解四种加载配置项的方法

    目录 1.spring加载yml文件 2.spring 加载 properties 文件 3.spring加载系统磁盘(properties)文件 4.spring加载xml文件 5.Java基于InputStream读取properties配置文件 本文默认 spring 版本是 spring5 1 spring 加载 yml 文件 2 spring 加载 properties 文件 3 spring 加载 系统磁盘 文件 4 spring 加载 xml 文件 5 Java 基于 InputS

  • IOS中Json解析实例方法详解(四种方法)

    IOS中Json解析实例方法详解(四种方法)

    作为一种轻量级的数据交换格式,json正在逐步取代xml,成为网络数据的通用格式. 有的json代码格式比较混乱,可以使用此"http://www.bejson.com/"网站来进行JSON格式化校验(点击打开链接).此网站不仅可以检测Json代码中的错误,而且可以以视图形式显示json中的数据内容,很是方便. 从IOS5开始,APPLE提供了对json的原生支持(NSJSONSerialization),但是为了兼容以前的iOS版本,可以使用第三方库来解析Json. 本文将介绍Tou

  • javascript中类的定义方式详解(四种方式)

    本文实例讲述了javascript中类的定义方式.分享给大家供大家参考,具体如下: 类的定义包括四种方式: 1.工厂方式 function createCar(name,color,price){ var tempcar=new Object; tempcar.name=name; tempcar.color=color; tempcar.price=price; tempcar.getName=function(){ document.write(this.name+"-----"+

  • vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】

    本文实例讲述了vue使用自定义事件的表单输入组件用法.分享给大家供大家参考,具体如下: 自定义事件可以用来创建自定义的表单输入组件,使用 v-model 来进行数据双向绑定. v-model的实现原理 : <input v-model="something"> 这不过是以下示例的语法糖: <input v-bind:value="something" v-on:input="something = $event.target.value&

  • Java 中 synchronized的用法详解(四种用法)

    Java语言的关键字,当它用来修饰一个方法或者一个代码块的时候,能够保证在同一时刻最多只有一个线程执行该段代码. 1.方法声明时使用,放在范围操作符(public等)之后,返回类型声明(void等)之前.这时,线程获得的是成员锁,即一次只能有一个线程进入该方法,其他线程要想在此时调用该方法,只能排队等候,当前线程(就是在synchronized方法内部的线程)执行完该方法后,别的线程才能进入. 例如: public synchronized void synMethod() { //方法体 }

  • SpringAOP四种通知类型+环绕通知说明

    SpringAOP四种通知类型+环绕通知说明

    目录 一.四种常见的通知类型 注意 二.环绕通知 1.改动日志类 Logger.java 2.改动配置文件 分析 AOP机制之环绕通知的见解 其中有五个通知类型 SpringAOP的四种通知类型:前置通知.异常通知.后置通知.异常通知 一.四种常见的通知类型 给出 账户的业务层接口 IAccountService.java, 为了便于演示这四种通知类型,我们就只留下了一个方法. public interface IAccountService { void saveAccount(); } 给出

  • Element UI中v-infinite-scroll无限滚动组件使用详解

    目录 一.v-infinite-scroll无限滚动组件使用详解 二.组件无限加载原因及解决方式 三.总结 总结 一.v-infinite-scroll无限滚动组件使用详解 1.v-infinite-scroll="load" //load无限滚动加载的方法 2.infinite-scroll-disabled //是否禁用无限滚动加载 3.infinite-scroll-delay //节流时延,单位为ms 4.infinite-scroll-distance //触发加载的距离阈值

  • 详解JavaScript类型判断的四种方法

    JavaScript有八种内置类型,除对象外,其他统称为"基本类型". 空值(null) 未定义(undefined) 布尔值(boolean) 数字(number) 字符串(string) 对象 (object) 符号(symbol, ES6中新增) 大整数(BigInt, ES2020 引入) Symbol: 是ES6中引入的一种原始数据类型,表示独一无二的值. BigInt:是 ES2020 引入的一种新的数据类型,用来解决 JavaScript中数字只能到 53 个二进制位(J

  • 详解vue 模版组件的三种用法

    本文介绍了详解vue 模版组件的三种用法,分享给大家,具体如下: 第一种 //首先,别忘了引入vue.js <div id="user_name_01"></div> <script src="../node_modules/vue/dist/vue.js"></script> <script> var User_01 = Vue.extend({// 创建可复用的构造器 template: '<p&

随机推荐