Angular的@Output与@Input理解

@Output与@Input理解

Output和Input是两个装饰器,是Angular2专门用来实现跨组件通讯,双向绑定等操作所用的。

@Input

Component本身是一种支持 nest 的结构,Child和Parent之间,如果Parent需要把数据传输给child并在child自己的页面中显示,则需要在Child的对应 directive 标示为 input。

形如:

@Input() name: number;

我们通过一个例子来分析一下@Input的流程。

在这里插入图片描述

流程

  1. child_component.ts内有students,并且是被Input标记的,那么这个属性作为输入属性
  2. 在parent_component.html内直接使用了students,那是因为在parent.module.ts内将child组件import进来了
  3. [students]这种形式叫属性绑定,绑定的值为school.schoolStudents属性
  4. Angular会把schoolStudents的值赋值给students,然后影响到子组件的显示
  5. <

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/536141.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

腾讯云CDN配置

第一步&#xff1a;先去领取腾讯云CDN免费包23333333 以下为正式步骤&#xff1a; 在这里体现大家&#xff0c;域名一定要备案&#xff0c;另外要明白域名如何解析 前边问题不大&#xff0c;一切跟着腾讯云的套路来即可&#xff0c;需要注意的是网上后优化的配置大家可以自行…

Promise.all的深入理解

异步之Promise Promise.all Promise.all接收的promise数组是按顺序执行的还是一起执行的&#xff0c;也就是说返回的结果是顺序固定的吗&#xff1f; 目前有两种答案&#xff1a; 应该是同步执行的&#xff0c;但是这样就有效率问题了&#xff0c;如果想改成异步执行怎么办…

wordpress后台无法登录问题

之前给自己的WordPress加了个标签云&#xff0c;今天登录的时候突然发现网站后台进不去了&#xff0c;无奈各种找材料&#xff0c;这算是皇天不负有心人&#xff0c;总算是给我找到了&#xff0c;现在做一下记录 登录不上的原因在于&#xff1a;wp-admin和wp-admin/是不同的&a…

深入理解Angular订阅者模式

深入理解Angular订阅者模式 如果正在读此篇文章的你学过java,c++等面向对象语言,知道两个模式观察者模式和订阅者模式,分别为:Observer pattern,Pub-sub pattern(Subscriber) 接下来我们结合Angular来说明这两个模式。 Observer pattern This is a pattern of developme…

Ubuntu中安装python3

通过命令行安装Python3.*&#xff0c;只需要在终端中通过命令行安装即可&#xff1a; sudo apt-get install python3 Ubuntu的底层大多数采用的是Python2.*&#xff0c;Python3和Python2是互相不兼容的&#xff0c;完全没法通用的&#xff08;也不知道他们怎么想的o(TヘTo)&a…

Angular深入理解之指令

Angular深入理解之指令 指令有什么功能 Attribute directives 属性指令Structural directives 结构指令自定义属性指令自定义结构指令Angular深入理解之指令 对于初学Angular的同学来说,指令无疑是最痛苦的,那么我们怎么使用自定义的指令呢?指令到底怎么实现呢?为什么要写…

windows下Apache虚拟主机配置

找到host文件&#xff1a;C:\Windows\System32\drivers\etc\hosts 在hosts这么增加&#xff1a; 127.0.0.1 666.666.com 127.0.0.1 777.777.com 修改httpd.conf文件&#xff1a; 打开文件&#xff1a;xxx\xampp\apache\conf\httpd.conf 找到#LoadModule vhost_…

Angular深入理解基本组成

Angular深入理解基本组成 在讲指令时,我们先来了解一下Angular的基本概念和结构。 Module 模块 Angular 是模块化的.Modules 导出 classes, function, values , 以便在其他模块导入使用.angular应用由模块组成,每个模块都做此模块相关的事情组件、方法、类、服务等,他们都…

1607: 字符棱形

1607: 字符棱形 根据读入的字符和边长&#xff0c;勾画字符棱形。 Input 输入数据含有不超过50组的数据&#xff0c;每组数据包括一个可见字符c和一个整数n&#xff08;1≤n≤30&#xff09;。 Output 输出以c为填充字符&#xff0c;边长为n的棱形&#xff0c;勾画每个棱形…

Angular深入理解管道Pipe

Angular深入理解管道 纯管道与非纯管道区别的本质 Pure FunctionImpure Function内置Pipe pipe使用自定义Pipe 管道性能优化Angular深入理解管道 管道的链接 有学过linux shell的同学,应该知道管道,在shell中的管道是IPC,linux的进程间通讯有pipe,FIFO,signal。这里只是简单…

1959: 图案打印

1959: 图案打印 Description 一年一度的植树节就要到了&#xff0c;计算机学院学生准备在学院教学楼门前的空地上种植树木。为使树木排列得更加美观&#xff0c;大家决定把树木排列成菱形。现在告诉你我们所拥有的树木能排列成边长为N的菱形&#xff0c;请你编程输出树木所排…

JS事件的捕获和冒泡阶段

JS事件的捕获和冒泡阶段 这里介绍两个事件模型&#xff1a;IE事件模型与DOM事件模型 IE内核浏览器的事件模型是冒泡型事件&#xff08;没有捕获事件过程&#xff09;&#xff0c;事件句柄的触发顺序是从ChildNode到ParentNode。 <div id"ancestor"> <butt…

2016: C语言实验——打印金字塔

2016: C语言实验——打印金字塔 Description 输入n值&#xff0c;打印下列形状的金字塔&#xff0c;其中n代表金字塔的层数。 Input 输入只有一个正整数n。 Output 打印金字塔图形&#xff0c;其中每个数字之间有一个空格。 Sample Input 3 Sample Output 11 2 1 1 2 …

Anuglar中正确导入RxJS库

Anuglar中正确导入RxJS库 目前Angular2中的已经内建支持RxJS,所以我们在使用的时候可以直接导入使用了。 理解操作符导⼊ 在使用创建依赖于 RxJS 组件,服务,指令等等时, 你可能遇到处理运算符导⼊的问 题。 在项⽬中引⼊操作符最主要的⽅式像下⾯这样导⼊: import rxj…

1495: 蛇行矩阵

1495: 蛇行矩阵 Description 蛇形矩阵是由1开始的自然数依次排列成的一个矩阵上三角形。 Input 本题有多组数据&#xff0c;每组数据由一个正整数N组成。&#xff08;N不大于100&#xff09; Output 对于每一组数据&#xff0c;输出一个N行的蛇形矩阵。两组输出之间不要额…

递归基础之N皇后问题

递归基础之N皇后问题 Description 在nn 格的棋盘上放置彼此不受攻击的n 个皇后。按照国际象棋的规则&#xff0c;皇后可以攻击与之 处在同一行或同一列或同一斜线上的棋子。n后问题等价于在nn格的棋盘上放置n个皇后&#xff0c; 任何2 个皇后不放在同一行或同一列或同一斜线上…

X86和X86_64和AMD64的由来

为什么叫X86和X86_64和AMD64 为什么大家叫x86为32位系统呢 相信大家在大学里面有很多人都玩过8086&#xff08;微处理器&#xff09;&#xff0c;这是一个可编程的系统&#xff0c;他是由intel开发的&#xff0c;英特尔出了划时代的8086之后&#xff0c;后来使用该架构出了80…

回炉-熄灯问题

进来突然意识到算法的重要性&#xff0c;可惜已经没有充足的时间去进行专业的训练了&#xff0c;只能慢慢挤时间做几个题练习一下聊以安慰&#xff0c;希望能多坚持几天吧&#xff0c;奉劝各位想学算法的同学一定要趁早啊。 poj1222 解析见郭炜老师的程序设计与算法&#xff…

ngrx初识

ngrx初识 在使用之前需要安装ngrx npm install @ngrx/store --save 或者 yarn add @ngrx/store ngrx/store:保存了ReduxAPI的核心概念,使用RxJS扩展的Redux实现。使用可观察对象来简化了监听事件的订阅等操作。 dispatch&reducer&state dispatcher,reducer,state…

回炉-特殊密码锁

题目&#xff1a;特殊密码锁 001:特殊密码锁 描述 有一种特殊的二进制密码锁&#xff0c;由n个相连的按钮组成&#xff08;n<30&#xff09;&#xff0c;按钮有凹/凸两种状态&#xff0c;用手按按钮会改变其状态。 然而让人头疼的是&#xff0c;当你按一个按钮时&#x…