0

0

Angular父组件调用子组件使用案例

php中世界最好的语言

php中世界最好的语言

发布时间:2018-05-02 14:49:46

|

1152人浏览过

|

来源于php中文网

原创

这次给大家带来Angular父组件调用子组件使用案例,使用Angular父组件调用子组件的注意事项有哪些,下面就是实战案例,一起来看一下。

理解组件

组件是一种特殊的指令,使用更简单的配置项来构建基于组件的应用程序架构

这样他能简单地写app,通过类似的web Component 或者angular2的样式。

web Component 是一个规范。马上就要成为标准。

应用组件的优点:

  • 比普通指令配置还简单

  • 提供更好的默认设置和最好的实践

  • 对基于组建的应用架构更优化。

  • 对angular2的升级更平滑。

不用组建的情况:

  • 对那些在 compile或者pre-link阶段要执行操作的指令,组件不能用,因为无法到达那个阶段。

  • 如果你想定义指令的  priority,terminal,multi-element,也不能用。

  • 组件只能通过元素标签触发,其他的只能用命令。

viewChild装饰器。

父组件的模版和控制器里调用子组件的API。

1、创建一个子组件child1里面只有一个greeting方法供父组件调用。

import { Component, OnInit } from '@angular/core';
@Component({
 selector: 'app-child1',
 templateUrl: './child1.component.html',
 styleUrls: ['./child1.component.css']
})
export class Child1Component implements OnInit {
 constructor() { }
 ngOnInit() {
 }
 greeting(name: string) {
 console.log("hello" + name);
 }
}

2、父组件中分别在模版中用模版本地变量调用和在控制器中用ts代码调用。

父组件写2个并分别指定模版本地变量

 
 

3,在父组件控制器中声明一个由viewChild装饰器装饰的变量获得子组件的引用

通过模版变量的名字child1找到相应的子组件并赋值给child1变量,拿到引用就可以调用子组件方法。

@ViewChild('child1')
child1:Child1Component; //父组件中获得子组件的引用
ngOnInit(){
 this.child1.greeting("Tom");
}

4,在父组件模版中调用子组件方法。

在父组件模版中加一个button,点击时去调用子组件child2的greeting方法。

 
 

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

Sunshine Office Anywhere(CRM集成版)[OA+CRM]
Sunshine Office Anywhere(CRM集成版)[OA+CRM]

CRM集成版基本功能:    内部邮件,短信息,个人文件柜,日程安排,名片录,网络硬盘,个人网址收藏,个人使用情况统计分析。    新闻管理,公告管理,日程安排查询,工作日志查询,公共网址管理,人事档案管理,组织机构信息查询。     企业文档管理,规章制度,电子刊物。    人力资源管理,档案管理,培训管理,奖惩管理,招聘信息,劳动合同    系统单位信息管理,部门信息管理,用户管理,用户角色设

下载

nodejs多版本管理使用详解

Vue中slots/scoped使用详解

相关专题

更多
Java 桌面应用开发(JavaFX 实战)
Java 桌面应用开发(JavaFX 实战)

本专题系统讲解 Java 在桌面应用开发领域的实战应用,重点围绕 JavaFX 框架,涵盖界面布局、控件使用、事件处理、FXML、样式美化(CSS)、多线程与UI响应优化,以及桌面应用的打包与发布。通过完整示例项目,帮助学习者掌握 使用 Java 构建现代化、跨平台桌面应用程序的核心能力。

61

2026.01.14

php与html混编教程大全
php与html混编教程大全

本专题整合了php和html混编相关教程,阅读专题下面的文章了解更多详细内容。

31

2026.01.13

PHP 高性能
PHP 高性能

本专题整合了PHP高性能相关教程大全,阅读专题下面的文章了解更多详细内容。

72

2026.01.13

MySQL数据库报错常见问题及解决方法大全
MySQL数据库报错常见问题及解决方法大全

本专题整合了MySQL数据库报错常见问题及解决方法,阅读专题下面的文章了解更多详细内容。

20

2026.01.13

PHP 文件上传
PHP 文件上传

本专题整合了PHP实现文件上传相关教程,阅读专题下面的文章了解更多详细内容。

21

2026.01.13

PHP缓存策略教程大全
PHP缓存策略教程大全

本专题整合了PHP缓存相关教程,阅读专题下面的文章了解更多详细内容。

7

2026.01.13

jQuery 正则表达式相关教程
jQuery 正则表达式相关教程

本专题整合了jQuery正则表达式相关教程大全,阅读专题下面的文章了解更多详细内容。

4

2026.01.13

交互式图表和动态图表教程汇总
交互式图表和动态图表教程汇总

本专题整合了交互式图表和动态图表的相关内容,阅读专题下面的文章了解更多详细内容。

49

2026.01.13

nginx配置文件详细教程
nginx配置文件详细教程

本专题整合了nginx配置文件相关教程详细汇总,阅读专题下面的文章了解更多详细内容。

11

2026.01.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue.js:纪录片
Vue.js:纪录片

共1课时 | 0.2万人学习

Angular js入门篇
Angular js入门篇

共17课时 | 3.5万人学习

Node.js 教程
Node.js 教程

共57课时 | 8.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号