文档章节

angular2 小知识点@Output Input ngOnInit

own1991
 own1991
发布于 2017/06/28 16:26
字数 148
阅读 21
收藏 0

forEach  A B

class A {  
    no: number[] = [1, 2, 3];  
    lognumber() {  
        this.no.forEach((nos) => { // foreach statement  
            document.write(" number=:" + nos);  
        })  
    }  
}  
window.onload = () => {  
    var call = new A();  
    call.lognumber();  
}  

foreach0-in-typescript.jpg

Angular 2 Input  A

Input 是属性装饰器,用来定义组件内的输入属性。在实际应用场合,我们主要用来实现父组件向子组件传递数据。接受任何数组对象,检查,更新

import { Component, Input } from '@angular/core';

@Component({
    selector: 'exe-counter',
    template: `
      <p>当前值: {{ count }}</p>
      <button (click)="increment()"> + </button>
      <button (click)="decrement()"> - </button>
    `
})
export class CounterComponent {
    @Input() count: number = 0;

    increment() {
        this.count++;
    }

    decrement() {
        this.count--;
    }
}
import { Component } from '@angular/core';

@Component({
  selector: 'exe-app',
  template: `
   <exe-counter [count]="initialCount"></exe-counter>
  `
})
export class AppComponent {
  initialCount: number = 5;
}

2

© 著作权归作者所有

own1991
粉丝 0
博文 61
码字总数 29561
作品 0
黄浦
私信 提问
angular6 组件间的交流方式(1)--@Output 和@Input

总的来说,Input 用来进行属性绑定,将父组件的属性传给子组件,即有数据传进组件;Output 用来在事件绑定时,子组件将事件传给父组件进行处理,既有数据传出组件;如图: @Output() 先来看串...

IrisHuang
2018/07/12
397
0
【前端】Angular组件钩子

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m18633778874/article/details/82259409 Angular中的钩子方法,是非常常用的知识点,也在项目代码运用中有所体...

冯浩月
2018/08/31
0
0
angular6 组件间的交流方式 (2)-- viewChild 和 data service

我在上上篇文章中介绍了父子组件间通过 Input 和 Output 的交流方式。现在我会介绍组件间交流的其他两种方法,viewChild 和 data service。我将这篇文章分为两部分。首先看 viewChild 部分吧...

IrisHuang
2018/07/30
207
0
Angular 2.4.6 和 4.0.0 beta6 发布, Web 前端框架

Angular 2.4.6 和 4.0.0 beta6 发布了,Angular 是一款十分流行且好用的 Web 前端框架,目前由 Google 维护。 Angular 2.4.6 更新内容: Bug 修复 common: add PopStateEvent interface comm...

王练
2017/02/04
2.1K
2
从 Angular 中的 URL 获取查询参数

本文介绍了如何从 Angular 中的 URL 获取查询参数。 通过注入ActivatedRoute的实例,可以订阅各种可观察对象,包括queryParams和params observable。以下是范例: 参考引用 本文同步至: 完整...

waylau
09/03
15
0

没有更多内容

加载失败,请刷新页面

加载更多

代理模式之JDK动态代理 — “JDK Dynamic Proxy“

动态代理的原理是什么? 所谓的动态代理,他是一个代理机制,代理机制可以看作是对调用目标的一个包装,这样我们对目标代码的调用不是直接发生的,而是通过代理完成,通过代理可以有效的让调...

code-ortaerc
今天
5
0
学习记录(day05-标签操作、属性绑定、语句控制、数据绑定、事件绑定、案例用户登录)

[TOC] 1.1.1标签操作v-text&v-html v-text:会把data中绑定的数据值原样输出。 v-html:会把data中值输出,且会自动解析html代码 <!--可以将指定的内容显示到标签体中--><标签 v-text=""></......

庭前云落
今天
8
0
VMware vSphere的两种RDM磁盘

在VMware vSphere vCenter中创建虚拟机时,可以添加一种叫RDM的磁盘。 RDM - Raw Device Mapping,原始设备映射,那么,RDM磁盘是不是就可以称作为“原始设备映射磁盘”呢?这也是一种可以热...

大别阿郎
今天
12
0
【AngularJS学习笔记】02 小杂烩及学习总结

本文转载于:专业的前端网站☞【AngularJS学习笔记】02 小杂烩及学习总结 表格示例 <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names | orderBy ......

前端老手
昨天
16
0
Linux 内核的五大创新

在科技行业,创新这个词几乎和革命一样到处泛滥,所以很难将那些夸张的东西与真正令人振奋的东西区分开来。Linux内核被称为创新,但它又被称为现代计算中最大的奇迹,一个微观世界中的庞然大...

阮鹏
昨天
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部