demo

1.demo结构 <inventory-app> || //传入数组 <product-list> || //进行迭代,并显示 <product-row> || 每个商品的badage,又可以拆分成图片,部门,价格等组件。 2. 输出属性,@Output装饰器 这个装饰器用于向其它组件发射数据,常配合eventEmitter使用。 在本demo中,组件先声明一个输出属性: @Output onProductSelected:EventEmtter(); 然后在构造函数中生成(new)一个发射器: 组件中是通过click()事件函数来发送被选中的product;最后使用onProductSelected.emit(product)发射出去。 然后,在组件的html模板中, <rec-comp>标签表示是发送数据的目标组件,因为使用的是click方法,因此(click)=’clicked(productChoosed)’ click是一个内置方法,当点击某个元素(row)时。就调用列表组件中的clicked(produtChoosed)方法,发射数据到根组件, 根组件: <product-list [products]=’products’ (onProductelected)=’productWasSelected($event)’>…

Angular2(二)

1、注意把数据结构从组件代码里分离出来。创建额外的数据模型(类)并导入。以及构造函数传参等。如

这是一个普通类而不是Angular组件。在MVC模式中,它被称为模型(model)。 2、组件之间传值步骤, ①创建数据模型 ②在组件或服务中定义一些需要传送的数据 ③传送,目标组件的选择器(标签)=>插入 [InputName]=’name’, [InputName]=’name’, 左侧是输入属性名,即目标组件的:@Input() InputName:elementype,位置。右侧是迭代局部变量,即装载了数组的值;name由ngFor指令设置。 当传送过来后,就可以在目标组件的视图中使用了。 3、javascript方法split()和sort() split(origin_tring,array_max_length)[i] 参数:起始位置、数组最大长度、选取切割后的第i个字符串。 sort(sortBy/sortFunction) 默认根据编码来排序,参数表示根据指定方法排序。

Angualr2(一)

1.ng g component component_name 生成组件。 2. ng serve命令会自动把.ts文件编译成.jswenjian。 3.import { something } from somewhere ,用来拉取依赖 其中,{ something } 这部分称做解构。 4. 装饰器 @component 当在一个类上使用@component时,这个类就被装饰成一个组件。 5. <prefix-xxxx>选择器(标签)…