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 ...
随机推荐
- 【Source Insight 】之marco学习笔记2
现在我们看先看一个 官方地址https://www.sourceinsight.com/download/macro-files/中的 autoexp.em Automatically expands ...
- ncnn 源码学习-Mat.h Mat.c
纯小白记录下腾讯的ncnn框架源码的学习.纯粹写给自己看的,不保证正确性. Mat 类似于 caffe中的blob,是一个张量的存储结构体. 一.数据成员: 1.void * data 多维数据按一位 ...
- css:长度距离的一个计算函数calc
.calc-example{ width: calc(100% - 100px);} 可用于宽度,高度,margin,padding等长度或距离的计算 减号两边必须留一个空格
- 运维中的日志切割操作梳理(Logrotate/python/shell脚本实现)(转)
对于Linux系统安全来说,日志文件是极其重要的工具.不知为何,我发现很多运维同学的服务器上都运行着一些诸如每天切分Nginx日志之类的CRON脚本,大家似乎遗忘了Logrotate,争相发明自己的轮 ...
- c/c++基础 const
int main(int argc, char* argv[]) { '; '; a1='; //a2='2'; //a2是字符常量 "; "; a3="; //a4=& ...
- C# winform进度条 (异步)
进度条页面: http://www.cnblogs.com/Deckard/archive/2009/06/24/1510451.html //============================ ...
- [Nginx]实战Nginx:Nginx的一些介绍
------------------------------------------------------------------------------------------------ 首先列 ...
- .NETMVC小笔记
.NETMVC如何不引用_Layout.chtml view文件夹里面有个_ViewStart.cshtml文件,打开可以看到 @{ Layout = "~/Views/Shared/_La ...
- is not writable or has an invalid setter method错误的解决
java中在配置spring时,遇到is not writable or has an invalid setter method的错误一般是命名方式的问题 需要写成private userInfoD ...
- asp.net 如何判断输入的值 包括 汉字?
string input = " 里面是不是汉字 ";bool bl= System.Text.RegularExpressions.Regex.IsMatch(input, @& ...