Angular06 组件、模块、父子组件之间的数据传递
1 创建组件
进入到angular项目的根目录,执行如下命令
ng g component test-component
注意:执行完上述命令后在angular项目的src/app文件夹下就会多出一个名为test-component的文件夹,这个文件里面的文件就是test-component组件所需的文件;angul-cli会自动将新增的组件添加到主模块中(因为我们还没有自己定义模块,所以自动添加到主模块中)【即使我们自己添加了一个自己的模块,通过angular-cli创建的组件任然会默认添加到主模块中,如果我们想要将其添加到自己的模块中就必须进行手动添加】
2 组件的基本组成
2.1 装饰器:只有为组件控制类添加了@Component装饰器,这个组件类才会成为一个angular组件
2.2 元数据:就是@Component装饰器中的属性值
2.3 模板:每个组件对应的视图文件
2.4 组件控制类:就是一个实现组件所有逻辑的TypeScript类
3 组件中的内容是如何显示到HTML文件中的
在HTML中添加组件对应的标签,angular会在组件标签位置自动插入组件对应的模板
4 模块
4.1 组件和模块的关系
如果将整个angular应用比喻成一个用积木搭建的变形金刚,那么组件就是一个一个的积木;变形金刚的手臂、腿、头等就是一个一个的模块,其中每一个模块都是有多个组件构成;这些手臂、腿、头等共同组件成一个完成的变形金刚。故,一个angular应用是由多个模块组成,一个模块又是由多个组件组成,组件是angular应用中的最小单位。(注意:一个angular应用中虽然可以有多个模块,但是只能有一个主模块)
4.2 主模块(根模块)
就是在启动脚本中指定的那个模块,在利用angular-cli创建项目时的主模块就是AppModule,这个主模块会被自动设定一个主组件AppComponent
4.3 创建模块
ng g module 模块名
例如
ng g module my-module
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {UserInfoComponent} from '../../user/user-info/user-info.component'; @NgModule({
imports: [
CommonModule
],
declarations: [
UserInfoComponent // 声明该模块中有的组件
],
exports: [
UserInfoComponent // 声明导出该模块的哪些组件
]
})
export class MyModuleModule { } // 模块到处声明
4.4 导出模块中的组件、指令、管道 和 导入依赖模块
现有模块1和模块2,在模块1中有组件1,在模块2中有组件 2;如果想要在模块1中用组件2,就必须在模块1中导入模块2这个依赖模块,而且在模块2中还必须导出组件2,只用这样组件2才能在模块1中被调用
自定义模块
主模块
使用依赖模块中导出的组件
5 组件的输入输出属性(揭秘angular2 -> P113)
通过子组件的输入输出属性和父组件的属性绑定和事件绑定可以实现父子组件之间的数据传递
5.1 父组件项子组件传递数据01(输入属性)
将父组件中的数据传递到子组件当中,父组件通过属性绑定的方式来向子组件发送数据
子组件的控制器中接收数据的属性变量需要用@Input()装饰器进行装饰后才能够接收父组件传递过来的数据
父组件中子组件的标签上面需要添加 [接收数据的属性变量名]=“父组件中包含传递数据的属性变量”
5.2 父组件项子组件传递数据02(输入属性)
子组件在通过输入属性接收父组件传递过来的数据是可以对数据进行拦截,常见的拦截方式有两种:setter拦截和ngOnChanges监听
5.2.1 setter拦截
技巧01:此时父组件中使用子组件时所用的输入属性是 contactObj( 即:@Input()注解的那个set方法 )
就是利用set方法来实现拦截,形如:
<ul>
<li *ngFor="let item of contact_list; let i = index;">
<contact-item [contactObj]="item"></contact-item>
</li>
</ul>
ContactListComponent.html
import { Component, OnInit } from '@angular/core'; @Component({
selector: 'contact-list',
templateUrl: './contact-list.component.html',
styleUrls: ['./contact-list.component.scss']
})
export class ContactListComponent implements OnInit {
contact_list: Contact[]; constructor() { } ngOnInit() {
this.contact_list = [
new Contact("warrior", 1327885616),
new Contact("fury", 15133818291),
new Contact("zeus", 16620064649),
new Contact("", 13212222222)
];
} } export class Contact {
constructor(
public name:string,
public number:number
) {}
}
ContactListComponent.java
<p>
{{contactObj.name}} --- {{contactObj.number}}
</p>
ContactItemComponent.html
import { Component, OnInit, Input } from '@angular/core';
import { Contact } from '../contact-list/contact-list.component'; @Component({
selector: 'contact-item',
templateUrl: './contact-item.component.html',
styleUrls: ['./contact-item.component.scss']
})
export class ContactItemComponent implements OnInit { _contact: Contact = new Contact("", 12); @Input()
set contactObj(contact: Contact) {
this._contact.name = (contact.name && contact.name.trim()) || "待定用户";
if (this._contact.name === "待定用户") {
this._contact.number = 13200000000;
}
} get contactObj() {
return this._contact;
} constructor() { } ngOnInit() {
} }
ContactItemComponent.ts
5.2.2 ngOnchanges监听
待更新......
5.3 子组件向父组件传递数据
父组件通过事件绑定的方式来订阅来自子组件触发的事件
子组件的输出属性是由@Output()修饰的一个EventEmitter实例
注意:详细内容请参见 《揭秘angular2》P127
Angular06 组件、模块、父子组件之间的数据传递的更多相关文章
- ThreadLocal父子线程之间的数据传递问题
一.问题的提出 在系统开发过程中常使用ThreadLocal进行传递日志的RequestId,由此来获取整条请求链路.然而当线程中开启了其他的线程,此时ThreadLocal里面的数据将会出现无法获取 ...
- 解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function
Vue的项目中,如果项目简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 进行传递 但是如果是大中型项目中,很多时候都需要在不相关的平行组件之间传递数据,并且很多数据需要 ...
- 简述在Vue脚手架中,组件以及父子组件(非父子组件)之间的传值
1.组件的定义 组成: template:包裹HTML模板片段(反映了数据与最终呈现给用户视图之间的映射关系) 只支持单个template标签: 支持lang配置多种模板语法: script:配置Vu ...
- React中父组件与子组件之间的数据传递和标准化的思考
React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...
- Vue 爬坑之路(二)—— 组件之间的数据传递
Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,com ...
- Vue基础知识之组件及组件之间的数据传递(五)
vue中的组件是自定的标签,可以扩展的原生html元素,封装可复用的代码 note: 1.在标签命中不要使用大写,标签名字必须用短横线隔开 2.模板中只能有一个根元素,不能使用并列标签. 定义组件 全 ...
- Vue之组件之间的数据传递
Vue的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据,必须使用特定的方法才能实现组件之间的数据传递. 下列为在vue-cli创建项目中的操作 一·父组件向子组件传递数据 在Vue中 ...
- 【整理】解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function
解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function https://www.cnblogs.com/jaso ...
- (转)Vue 爬坑之路(二)—— 组件之间的数据传递
Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,com ...
随机推荐
- php类和对象(二)
面向对象第三大特性:多态 概念: 当父类引用指向子类实例的时候,由于子类对父类函数进行了重写,导致我们在使用该引用取调用相应方法时表现出的不同 条件: 1.必须有继承 2.子类必须对父类的方法进行重写 ...
- 《DevExpress》记录之TreeList
如这两幅图所示:如果要显示左边的竖线,需要设置 感谢 DoomGuards本节Dome下载地址:http://pan.baidu.com/s/1wBOJk 密码:vz4d
- js 实现滑块效果
var dd = $(".drag_bott").removeAttr('id').last().attr('id','drag_bott'); var drag = docume ...
- [原创]java WEB学习笔记09:ServletResponse & HttpServletResponse
本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...
- python练习_简单登录
python练习_简单登录 需求: 做一个登录的小程序,验证用户与密码 要求登录三次错误后锁定 以下代码实现的功能与思路: 功能: 1.除admin以外的用户累计登录失败次数超过三次则锁定,此时需要管 ...
- 升级到JDK8,编译时发生 Error:java: java.lang.ExceptionInInitializerError
编译的时候出现这个问题.使用1.7的jdk没问题,但是由于po主的项目中,使用了java8编写的代码,解决java8兼容问题成为解决这个问题的首选方案. 这个日志太过简单,只告知一个异常信息,这个异常 ...
- BZOJ 2002 [Hnoi2010]Bounce 弹飞绵羊:分块
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2002 题意: 某天,Lostmonkey发明了一种超级弹力装置,为了在他的绵羊朋友面前显摆 ...
- PHP 写入缓存
1.创建file.PHP <?php class File{ //封装方法 private $_dir; const EXT='.text';//文件后缀,定义为常量 public functi ...
- [原]NYOJ-房间安排168
大学生程序代写 /*房间安排 时间限制:3000 ms | 内存限制:65535 KB 难度:2 描述 2010年上海世界博览会(Expo2010),是第41届世界博览会.于2010年5月1日至1 ...
- FFmpeg内存操作(三)内存转码器
相关博客列表 : FFMPEG内存操作(一) avio_reading.c 回调读取数据到内存解析 FFMPEG内存操作(二)从内存中读取数及数据格式的转换 FFmpeg内存操作(三)内存转码器 本文 ...