angular 中间人模式】的更多相关文章

import { Component, OnInit, EventEmitter, Output } from '@angular/core'; @Component({ selector: 'app-order-change', templateUrl: './order-change.component.html', styleUrls: ['./order-change.component.css'] }) export class OrderChangeComponent impleme…
设计一个组件时,组件应该是内聚的,应该不依赖外部已经存在的组件,要实现这种松耦合的组件要使用中间人模式. 一.中间人模式 该组件树中除了组件1以外,每个组件都有一个父组件可以扮演中间人的角色.顶级的中间人是组件1,它可以使组件2,组件3,组件6之间互相通讯.依次类推,组件2是组件4和组件5的中间人.组件3是组件7和组件8的中间人. 中间人负责从一个组件接收数据并将其传递给另一个组件. 二.例子 股票报价组件为例,假设交易员在监看着报价组件的价格,当股票价格达到某一个值的时候,交易员会点一个购买按…
1 输入属性 通常用于父组件向子组件传递信息 举个栗子:我们在父组件向子组件传递股票代码,这里的子组件我们叫它app-order 首先在app.order.component.ts中声明需要由父组件传递进来的值 order.component.ts ... @Input() stockCode: string @Input() amount: string ... order.component.html <p>这里是子组件</p> <p>股票代码为{{stockCod…
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { Product1Component } from './product1/product1.component'; import { ProductServiceService } f…
创建项目 创建工作目录 使用bower下载需要插件 git init.add.commit之后得到分支master,再创建developer分支,然后再此分支上进行具体功能开发 MVC架构 之前小项目中一般会存在一个module下面会有若干控制器,若干自定义指令,若干自定义服务.但是在大项目中,我们这样操作会给开发以及后期维护带来诸多不便,主要是耦合度太高,全部揉在一起了. 降低耦合度,我们可以定义一个主模块module进行管理,再定义其他功能模块进行业务实现,例如控制器模块,自定义指令模块,自…
在开始介绍angular原理之前,我们有必要先了解下mvvm模式在angular中运用.虽然在angular社区一直将angular统称为前端MVC框架,同时angular团队也称它为MVW(Whatever)框架,但angular框架整体上更接近MVVM模式.下面是Igor Minar发布在Google+ https://plus.google.com/+IgorMinar/posts/DRUAkZmXjNV的文章内容: MVC vs MVVM vs MVP. What a controver…
Angular组件间通讯 组件树,1号是根组件AppComponent. 组件之间松耦合,组件之间知道的越少越好. 组件4里面点击按钮,触发组件5的初始化逻辑. 传统做法:在按钮4的点击事件里调用组件5的方法.紧密耦合. Angular:在组件4根本不知道组件5存在的情况下实现. 使用松耦合的方式在组件之间传递数据开发出高重用性的组件. 使用输入输出属性在父子关系的组件之间传递数据. 一.输入输出属性概述 组件设计成黑盒模型,用输入属性声明从外部世界接收什么东西.不需要知道这些东西从哪里来来.…
AngularJS 优点 模板功能强大丰富,并且是声明式的,自带了丰富的Angular指令: 是一个比较完善的前端MVC框架,包含模板,数据双向绑定,路由,模块化,服务,过滤器,依赖注入等所有功能: 自定义Directive,比jQuery插件还灵活,但是需要深入了解Directive的一些特性,简单的封装容易,复杂一点官方没有提供详细的介绍文档,我们可以通过阅读源代码来找到某些我们需要的东西,如:在directive使用 $parse: ng模块化比较大胆的引入了Java的一些东西(依赖注入)…
一.输入属性(父组件与子组件通信) 1. 创建工程 ng new demo1 2.创建order组件 ng g component order 3. 在order组件里定义输入属性 order组件的html 4. 父组件 app.component.ts中定义stock app.component.html, 采用双向绑定 效果图 最终父组件IBM的值,通过输入属性,把值传递给了子组件 二.输出属性(子组件与父组件通信) 1. ng g component priceQutoe 创建报价组件 2…
1.@Input:可设置属性 当它通过属性绑定的形式被绑定时,值会“流入”这个属性. 在子组件中使用,例如:@Input()name:string 父组件定义宾亮,并在父组件的模板中绑定,例如: 子组件模板中:{{name}} 子组件控制器中:@Input()name:string 父组件控制器中:username = "Lion" 父组件模板中:[name] = "username" (在调用的子组件的选择器中绑定) 此时,数据即从父组件传入子组件,子组件能在本身…