一 父组件

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之输入输出属性的更多相关文章

  1. angular $http配置属性

    $http请求的配置对象 $http()接受的配置对象可以包含以下属性: method:http请求方式,可以为GET,DELETE,HEAD,JSONP,POST,PUT url:字符串,请求的目标 ...

  2. angular 2+ innerHTML属性中内联样式丢失

    通过属性绑定的innerHTML,把字符串里面的html解析 解析是没问题的,但一些内联样式会丢失掉 为了不丢掉样式,需要自定义一个管道来解决这个问题 html.pipe.ts import {Pip ...

  3. angular中datetime-local属性使用ng-model报错

    项目需求是将年月日格式更改为年月日时分的格式展示,翻遍了整个项目没找到符合的组件,自己现敲一个也来不及,只好直接使用原生自带的组件--datetime-local.之前都是用的vue写项目,第一次接触 ...

  4. 在checkbox中使用.prop; angular中属性的值使用变量问题

    1.在checkbox中使用.prop而不使用.attr ,.attr有时并不如愿的改变checkbox的打钩问题 给这个checkbox设置return  false就能阻止点击则改变状态的默认行为 ...

  5. {{angular.js 使用技巧}} - 实现计算列属性

    前端MV*框架现在有很多,其中某些框架有计算列(又叫监控属性),比如:微软推荐的 Knockout.js 和博客园司徒正美的 avalon.js 框架. 本人只使用过 Knockout.js,aval ...

  6. Angular组件——父子组件通讯

    Angular组件间通讯 组件树,1号是根组件AppComponent. 组件之间松耦合,组件之间知道的越少越好. 组件4里面点击按钮,触发组件5的初始化逻辑. 传统做法:在按钮4的点击事件里调用组件 ...

  7. Angular 4.0从入门到实战

    AngularJS 优点 模板功能强大丰富,并且是声明式的,自带了丰富的Angular指令: 是一个比较完善的前端MVC框架,包含模板,数据双向绑定,路由,模块化,服务,过滤器,依赖注入等所有功能: ...

  8. Angular 5.x 学习笔记(1) - 模板语法

    Angular 5.x Template Syntax Learn Note Angular 5.x 模板语法学习笔记 标签(空格分隔): Angular Note on github.com 上手 ...

  9. Angular 学习思路

    近些年前端框架非常多,主流的有 Vue.React.Angular 等.我参与的项目中使用较多的是 Vue.因为 Vue 学习难度不大,上手很快,代码简洁,而且使用 Vue 全家桶(Vue + Vue ...

随机推荐

  1. CSS属性组-动画、转换、渐变

    一.动画 animation动画属性是一个简写属性,用于设置六个动画属性 aninmation-name动画名称,被调用 animation-duration完成动画需要的持续时间 animation ...

  2. day05-表的三种关系

    表的三种关系 1)一对一 关联方式:foreign key+unique例如1个学生只能有1个学号,1个学号只能对应1个学生 #两张表: 学生表(student)和 学号表(student_id) # ...

  3. python 阿狸的进阶之路(8)

    异常处理 http://www.cnblogs.com/linhaifeng/articles/6232220.html(转) 网络编程socket http://www.cnblogs.com/li ...

  4. Excel快捷生成想要的xml或text

    1.新建一个xml格式的A.xml文本,里面有4条以上的内容,注意哦,里面的元素与Excel里面的标题列数是一直的,不然会少了对应的某列数据.如: 2.打开Excel——>新建一个sheetl— ...

  5. Win2008R2配置WebDeploy(转)

    一.配置服务器 1.安装管理服务 2.点击管理服务进行配置 3.安装WebDeploy 3.1通过离线安装包方式安装: https://www.iis.net/downloads/microsoft/ ...

  6. js弹出div层内容(按回退键关闭div层及遮罩)

    <!--弹出的div列表对应的详情--> <div id="newhtml" class="white_content"> <di ...

  7. python之 pendulum讲解

    一,下载地址:https://pypi.python.org/pypi/pendulum 二,pendulum的一大优势是内嵌式取代Python的datetime类,可以轻易地将它整合进已有代码,并且 ...

  8. Linux下Mongodb安装和启动配置 原

    1.安装 略 2.配置 01.mkdir /usr/local/mongodb/data 0.touch /usr/local/mongodb/logs 03.cd /usr/local/mongod ...

  9. 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 ...

  10. How to Pronounce the Word OR

    How to Pronounce the Word OR Share Tweet Share Tagged With: OR Reduction Study the OR reduction.  Th ...