Angular 父子Component的数据绑定实现

看个具体的例子：

我有一个风格为Master Detail的Angular应用。下图红色高亮区域包含了一个hero detail Component，即下图蓝色高亮区域所示。

这两个Component的selector可以在Chrome开发者工具的element标签页里看到：

具体实现步骤：

(1) 在app.module.ts里导入app-heroes和app-hero-detail这两个selector对应的Component，并在NgModule里声明：

(2) 在hero detail Component里定义一个Hero属性，使用装饰器@Input修饰，告知Angular，当其他Component嵌入该Component时，需要将值绑定到这个输入属性上。

detail Component的html没有特殊之处，显示属性hero对应的字段：

(3) parent Component，即消费这个detail Component的hero Component，将当前li里选中的hero实例绑定给detail Component使用@Input修饰的属性hero:

<h2>My Heroes</h2><ul class="heroes"><li *ngFor="let hero of heroes"[class.selected]="hero === selectedHero"(click)="onSelect(hero)"><span class="badge">{{hero.id}}</span> {{hero.name}}</li>
</ul><app-hero-detail [hero]="selectedHero"></app-hero-detail>

如果移除掉detail Component里的@Input修饰器，

会出现编译错误：

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

Angular 父子Component的数据绑定实现相关推荐

Angular父子Component之间的事件通知机制
例子:product-list为parent Component,product-alert为child Component. (1) child Component里必需的开发从@angular/ ...
Angular父子组件通过服务传参
今天在使用ngx-translate做多语言的时候遇到了一个问题,需要在登录页面点击按钮,然后调用父组件中的一个方法. 一开始想到了@input和@output,然而由于并不是单纯的父子组件关系,而是 ...
Angular 父子组件之间的通讯，自定义组件实现星星评分功能
Angular组件父子间通讯方法: OnInit(), Input() 通过输入属性和输出属性,通过EventEmitter 向父组件发射改变值示例一个星星打分的组件: 组件描述:1.根据分数值显示 ...
Angular父子组件传值
Angular父子组件传值 1 父组件向子组件传值 1 子组件操作 2 父组件操作 1 在ts文件中定义被传递的变量 2 在html文件绑定 2 子组件向父组件传值 1 子组件操作 2 父组件操作 1 ...
Angular 父子组件传值，非父子组件传值
一.子组件调用父组件,父组件给子组件传值引入Input header.component.ts import { Component, OnInit, Input, Output } from '@ ...
Angular中使用双向数据绑定操作表单的input、checkboc、radio、select、textarea实现简单的人员登记系统实例
场景 Angular介绍.安装Angular Cli.创建Angular项目入门教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...
angular dynamic component 笔记
使用到动态组件是因为我在做一个Table的控件,表格中有按钮等控件,并具有相应逻辑,同时项目中多处使用到该表格,故想提取一个可复用的控件以减少工作量.主要参考的文章是大神的修仙之路Angular 4. ...
如何从 SAP Spartacus Product Detail 页面，找到其 Angular 实现 Component 的位置
如图:假设我们通过下列 url,打开 SAP Spartacus 一个产品的明细页面,我们想找出是哪个 Angular Component,实现了该明细页面. http://localhost:420 ...
如何找到 SAP 电商云 Spartacus UI 产品明细界面对应的 Angular 实现 Component 名称
我们看一个 PDP 即 product detail page 的实际例子: http://localhost:4200/powertools-spa/en/USD/product/3881017/a ...

Angular 父子Component的数据绑定实现

Angular 父子Component的数据绑定实现相关推荐

最新文章

热门文章