一 父组件

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. 【Source Insight 】之marco学习笔记2

    现在我们看先看一个 官方地址https://www.sourceinsight.com/download/macro-files/中的 autoexp.em Automatically expands ...

  2. ncnn 源码学习-Mat.h Mat.c

    纯小白记录下腾讯的ncnn框架源码的学习.纯粹写给自己看的,不保证正确性. Mat 类似于 caffe中的blob,是一个张量的存储结构体. 一.数据成员: 1.void * data 多维数据按一位 ...

  3. css:长度距离的一个计算函数calc

    .calc-example{ width: calc(100% - 100px);} 可用于宽度,高度,margin,padding等长度或距离的计算 减号两边必须留一个空格

  4. 运维中的日志切割操作梳理(Logrotate/python/shell脚本实现)(转)

    对于Linux系统安全来说,日志文件是极其重要的工具.不知为何,我发现很多运维同学的服务器上都运行着一些诸如每天切分Nginx日志之类的CRON脚本,大家似乎遗忘了Logrotate,争相发明自己的轮 ...

  5. c/c++基础 const

    int main(int argc, char* argv[]) { '; '; a1='; //a2='2'; //a2是字符常量 "; "; a3="; //a4=& ...

  6. C# winform进度条 (异步)

    进度条页面: http://www.cnblogs.com/Deckard/archive/2009/06/24/1510451.html //============================ ...

  7. [Nginx]实战Nginx:Nginx的一些介绍

    ------------------------------------------------------------------------------------------------ 首先列 ...

  8. .NETMVC小笔记

    .NETMVC如何不引用_Layout.chtml view文件夹里面有个_ViewStart.cshtml文件,打开可以看到 @{ Layout = "~/Views/Shared/_La ...

  9. is not writable or has an invalid setter method错误的解决

    java中在配置spring时,遇到is not writable or has an invalid setter method的错误一般是命名方式的问题 需要写成private userInfoD ...

  10. asp.net 如何判断输入的值 包括 汉字?

    string input = " 里面是不是汉字 ";bool bl= System.Text.RegularExpressions.Regex.IsMatch(input, @& ...