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(){...})

时间: 2017-02-19

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

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

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

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

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

Angular 2使用路由自定义弹出组件toast操作示例

本文实例讲述了Angular 2使用路由自定义弹出组件toast操作.分享给大家供大家参考,具体如下: 原理: 使用Angular2的命名路由插座,一个用来显示app正常的使用,一个用来显示弹出框, <router-outlet name='apps'></router-outlet> <router-outlet name='popup'></router-outlet> 浏览器的导航栏中则这样显示 http://127.0.0.1:4200/(popup

详解vue 动态加载并注册组件且通过 render动态创建该组件

基于 iview Tabs 组件实现 功能:为每个 tab 动态创建不同的.特定的组件内容,而不需要大量的 import 组件并进行 component 注册 Index.vue <template> <div class="content-left-menu"> <div class="item-contain layout-content"> <Tabs class="cmcc-ivu-tab2" t

vue 点击按钮实现动态挂载子组件的方法

Vue.extend( options ) 参数: {Object} options 用法: 使用基础 Vue 构造器,创建一个"子类".参数是一个包含组件选项的对象. data 选项是特例,需要注意 - 在 Vue.extend() 中它必须是函数 示例:子组件 byMount.vue <template> <div> <div>mount content test!!</div> </div> </template&

C#动态创建button按钮的方法实例详解

C#动态创建button按钮的方法实例详解 C#编程中经常需要动态创建,本文主要介绍C#动态创建button按钮的方法,涉及C#按钮属性动态设置的相关技巧,以供借鉴参考.具体实现方法如下: 例子: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.T

Python中动态创建类实例的方法

简介 在Java中我们可以通过反射来根据类名创建类实例,那么在Python我们怎么实现类似功能呢? 其实在Python有一个builtin函数import,我们可以使用这个函数来在运行时动态加载一些模块.如下: def createInstance(module_name, class_name, *args, **kwargs): module_meta = __import__(module_name, globals(), locals(), [class_name]) class_met

JS动态创建DOM元素的方法

本文实例讲述了JS动态创建DOM元素的方法.分享给大家供大家参考.具体如下: 近日,因工作需要,需要通过点击某个元素后, 动态创建一个DOM元素并显示,因此写了一些相关的JS函数,在此记录,以作备忘: /* 动态创建DOM元素的相关函数支持 */ /* 获取以某个元素的DOM对象 @obj 该元素的ID字符串 */ function getElement(obj) { return typeof obj=='string'?document.getElementById(obj):obj; }

C#在运行时动态创建类型的实现方法

本文实例讲述了C#在运行时动态创建类型的实现方法.是C#项目开发中很实用的技巧.分享给大家供大家参考.具体分析如下: 具体来说,C# 在运行时动态的创建类型是通过动态生成C#源代码,然后通过编译器编译成程序集的方式实现动态创建类型的. 主要功能代码如下: public static Assembly NewAssembly() { //创建编译器实例. provider = new CSharpCodeProvider(); //设置编译参数. cp = new CompilerParamete

angular学习之动态创建表单的方法

准备工作 使用ng new async-form创建一个新工程,在app.module.ts中引入ReactiveFormsModule模块并在根模块中导入 import { ReactiveFormsModule } from '@angular/forms'; @NgModule({ imports: [ ReactiveFormsModule ] }) 构建表单元素的基类 export class QuestionBase<T> { value: T;//表单元素的值 key: stri

Angular使用cli生成自定义文件、组件的方法

不得不说,和传统的复制黏贴来创建组件的方法相比,使用angular-cli的脚手架功能来创建模块.组件显得非常高效,不仅仅有了创建了文件,还包含了一些必须的代码,同时也将组件导入了最近的模块,一些重复性工作就使用cli可以节省掉.angular提供了丰富的文件类型,但是总归是有些我们自己的项目需要,我们需要创建自定义后缀的组件,这时候就不得不舍弃cli了,那么能不能使用自定义的方式来达到脚手架创建呢? angular 脚手架创建的方式 我们首先来看看angular-cli提供的一些命令是怎么创建