在Angular应用的child Component里同时使用@Input和@Output

简介: 在Angular应用的child Component里同时使用@Input和@Output

一个例子:

<app-input-output [item]="currentItem" (deleteRequest)="crossOffItem($event)"></app-input-output>

(1) child Component的item属性绑定到parent Component的currentItem属性上

(2) 当child属性抛出deleteRequest事件时,自动触发parent Component的crossOffItem函数。

数据流向如下:image.png

相关文章
|
1月前
|
JavaScript 前端开发 架构师
Angular进阶:理解RxJS在Angular应用中的高效运用
RxJS(Reactive Extensions for JavaScript)是JavaScript的一个响应式编程库,特别适用于处理异步数据流。
33 0
|
1月前
|
JavaScript 前端开发
Angular.js 应用中数据模式的删除操作实现
Angular.js 应用中数据模式的删除操作实现
|
1月前
|
前端开发 JavaScript 测试技术
使用Angular构建高效单页应用的实践指南
【5月更文挑战第21天】本文是使用Angular构建高效单页应用的实践指南,涵盖了Angular框架简介、SPA构建步骤和最佳实践。首先,Angular是基于TypeScript的前端框架,提供声明式模板、组件化和路由管理等功能。构建SPA包括环境搭建、创建组件、编写路由、数据绑定和交互,以及构建和部署。实践中,应遵循Angular风格指南,使用Angular Material UI库,实现服务端渲染,并进行性能优化和测试,以提升应用性能和用户体验。
|
1月前
|
JavaScript 前端开发
关于 Angular.js 应用里的 $scope.$apply()
关于 Angular.js 应用里的 $scope.$apply()
|
1月前
|
JavaScript 前端开发
Angular.js 应用里如何发送 HTTP 请求
Angular.js 应用里如何发送 HTTP 请求
|
1月前
|
编译器 API 开发者
Angular Component ɵcmp 属性的含义和使用场合介绍
Angular Component ɵcmp 属性的含义和使用场合介绍
|
1月前
|
资源调度 JavaScript 编译器
显式指定 npm 作为创建 Angular 应用时的包管理器
显式指定 npm 作为创建 Angular 应用时的包管理器
|
1月前
|
API 开发者
Angular Component class ɵfac 的属性介绍
Angular Component class ɵfac 的属性介绍
|
1月前
|
存储 前端开发 API
浅谈 Angular 应用前端消息显示机制的一个实际需求
浅谈 Angular 应用前端消息显示机制的一个实际需求
|
1月前
|
设计模式 JavaScript 前端开发
什么是 Angular 应用里的 Custom provider
什么是 Angular 应用里的 Custom provider