Angular之输入输出属性
一 父组件
company.component.ts
import { Component, OnInit } from '@angular/core'; @Component({
selector: 'app-company',
templateUrl: './company.component.html',
styleUrls: ['./company.component.css']
})
export class CompanyComponent implements OnInit { employee = 'Tom';
skill: string; constructor() { } ngOnInit() {
} releaseSkill(skill: string) {
this.skill = skill;
} }
company.compnent.html
<p>
company works! {{skill}}
</p>
<app-employee [name]="employee" (releaseSkill)="releaseSkill($event);"></app-employee>
二 子组件
employee.component.ts
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; @Component({
selector: 'app-employee',
templateUrl: './employee.component.html',
styleUrls: ['./employee.component.css']
})
export class EmployeeComponent implements OnInit { @Input()
name: string; skill: string; @Output()
releaseSkill: EventEmitter<string> = new EventEmitter(); constructor() { } ngOnInit() {
} perform() {
this.skill = '摄影';
this.releaseSkill.emit(this.skill);
} }
employee.component.html
<p>
employee works! {{name}}
</p>
<button type="button" (click)="perform();">表演</button>
三 运行效果
Angular之输入输出属性的更多相关文章
- angular $http配置属性
$http请求的配置对象 $http()接受的配置对象可以包含以下属性: method:http请求方式,可以为GET,DELETE,HEAD,JSONP,POST,PUT url:字符串,请求的目标 ...
- angular 2+ innerHTML属性中内联样式丢失
通过属性绑定的innerHTML,把字符串里面的html解析 解析是没问题的,但一些内联样式会丢失掉 为了不丢掉样式,需要自定义一个管道来解决这个问题 html.pipe.ts import {Pip ...
- angular中datetime-local属性使用ng-model报错
项目需求是将年月日格式更改为年月日时分的格式展示,翻遍了整个项目没找到符合的组件,自己现敲一个也来不及,只好直接使用原生自带的组件--datetime-local.之前都是用的vue写项目,第一次接触 ...
- 在checkbox中使用.prop; angular中属性的值使用变量问题
1.在checkbox中使用.prop而不使用.attr ,.attr有时并不如愿的改变checkbox的打钩问题 给这个checkbox设置return false就能阻止点击则改变状态的默认行为 ...
- {{angular.js 使用技巧}} - 实现计算列属性
前端MV*框架现在有很多,其中某些框架有计算列(又叫监控属性),比如:微软推荐的 Knockout.js 和博客园司徒正美的 avalon.js 框架. 本人只使用过 Knockout.js,aval ...
- Angular组件——父子组件通讯
Angular组件间通讯 组件树,1号是根组件AppComponent. 组件之间松耦合,组件之间知道的越少越好. 组件4里面点击按钮,触发组件5的初始化逻辑. 传统做法:在按钮4的点击事件里调用组件 ...
- Angular 4.0从入门到实战
AngularJS 优点 模板功能强大丰富,并且是声明式的,自带了丰富的Angular指令: 是一个比较完善的前端MVC框架,包含模板,数据双向绑定,路由,模块化,服务,过滤器,依赖注入等所有功能: ...
- Angular 5.x 学习笔记(1) - 模板语法
Angular 5.x Template Syntax Learn Note Angular 5.x 模板语法学习笔记 标签(空格分隔): Angular Note on github.com 上手 ...
- Angular 学习思路
近些年前端框架非常多,主流的有 Vue.React.Angular 等.我参与的项目中使用较多的是 Vue.因为 Vue 学习难度不大,上手很快,代码简洁,而且使用 Vue 全家桶(Vue + Vue ...
随机推荐
- CSS属性组-动画、转换、渐变
一.动画 animation动画属性是一个简写属性,用于设置六个动画属性 aninmation-name动画名称,被调用 animation-duration完成动画需要的持续时间 animation ...
- day05-表的三种关系
表的三种关系 1)一对一 关联方式:foreign key+unique例如1个学生只能有1个学号,1个学号只能对应1个学生 #两张表: 学生表(student)和 学号表(student_id) # ...
- python 阿狸的进阶之路(8)
异常处理 http://www.cnblogs.com/linhaifeng/articles/6232220.html(转) 网络编程socket http://www.cnblogs.com/li ...
- Excel快捷生成想要的xml或text
1.新建一个xml格式的A.xml文本,里面有4条以上的内容,注意哦,里面的元素与Excel里面的标题列数是一直的,不然会少了对应的某列数据.如: 2.打开Excel——>新建一个sheetl— ...
- Win2008R2配置WebDeploy(转)
一.配置服务器 1.安装管理服务 2.点击管理服务进行配置 3.安装WebDeploy 3.1通过离线安装包方式安装: https://www.iis.net/downloads/microsoft/ ...
- js弹出div层内容(按回退键关闭div层及遮罩)
<!--弹出的div列表对应的详情--> <div id="newhtml" class="white_content"> <di ...
- python之 pendulum讲解
一,下载地址:https://pypi.python.org/pypi/pendulum 二,pendulum的一大优势是内嵌式取代Python的datetime类,可以轻易地将它整合进已有代码,并且 ...
- Linux下Mongodb安装和启动配置 原
1.安装 略 2.配置 01.mkdir /usr/local/mongodb/data 0.touch /usr/local/mongodb/logs 03.cd /usr/local/mongod ...
- Examples: How to Pronounce T
Examples: How to Pronounce T Share Tweet Share Tagged With: Flap T, Stop T The [t] sound is not alwa ...
- How to Pronounce the Word OR
How to Pronounce the Word OR Share Tweet Share Tagged With: OR Reduction Study the OR reduction. Th ...