一、组件从外部接收值

1 修改组件的ts文件，让组件的属性可以从外部接收值

　　1.1 导入Input注解对象

　　1.2 在属性变量前面添加 @Input() 注解

　　1.3 去掉构造器中的属性变量赋值语句

　　

2 为标签组件添加一个输入属性

　　

　　注入：因为我们的组件是放在静态模板中的，所以需要到静态模板中去修改标签的属性；如果该组件是在其他模板中或者组件中就到相应的位置修改属性就可以啦；方括号里面的内容是组件ts文件中定义的属性变量，引号里面是一个变量，渲染组件时会将引号里面那个变量的值传给方括号里面的变量

3 打开HTTP服务，刷新浏览器

　　

二、组件中使用组件，而且子组件从外部接收值

1 修改子组件的ts文件，步骤已经在前面实现啦

2 在父组件的模板文件中添加子组件的标签

　　

3 在静态模板中添加父组件的标签

　　

4 打开HTTP服务器，刷新浏览器

　　

Angular04 组件动态地从外部接收值、在组件中使用组件的更多相关文章

  1. knockoutjs如何动态加载外部的file作为component中的template数据源

    玩过knockoutjs的都知道,有一个强大的功能叫做component,而这个component有个牛逼的地方就是拥有自己的viewmodel和template, 比如下面这样: ko.compon ...

  2. 每天记录一点：NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发

    每天记录一点:NetCore获得配置文件 appsettings.json   用NetCore做项目如果用EF  ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...

  3. VUE里子组件获取父组件动态变化的值

    在VUE里父组件给子组件间使用props方式传递数据,但是希望父组件的一个状态值改变然后子组件也能监听到这个数据的改变来更新子组件的状态. 场景:子组件通过props获取父组件传过来的数据,子组件存在 ...

  4. 插件占坑，四大组件动态注册前奏（三） 系统BroadCast的注册发送流程

    转载请注明出处:http://blog.csdn.net/hejjunlin/article/details/52204143 前言:为什么要了解系统Activity,Service,BroadCas ...

  5. vue 解决双向绑定中 父组件传值给子组件后 父组件值也跟着变化的问题

    说明: 近日开发中碰见一个很诡异的问题,  父组件动态的修改对象 data 中的值, 然后将这个对象 data 传给子组件, 子组件拿到后将 data 中的值 乘以 100 ,发现父组件中的值也跟着变 ...

  6. SpringMVC内容略多 有用 熟悉基于JSP和Servlet的Java Web开发，对Servlet和JSP的工作原理和生命周期有深入了解，熟练的使用JSTL和EL编写无脚本动态页面，有使用监听器、过滤器等Web组件以及MVC架构模式进行Java Web项目开发的经验。

    熟悉基于JSP和Servlet的Java Web开发,对Servlet和JSP的工作原理和生命周期有深入了解,熟练的使用JSTL和EL编写无脚本动态页面,有使用监听器.过滤器等Web组件以及MVC架构 ...

  7. 简述vue中父子组件是怎样相互传递值的（基础向）

    前言 首先,你需要知道vue中父组件和子组件分别指的是什么?   父组件:vue的根实例——用new Vue()构造函数创建的vue实例(实例会有一个挂载点,挂载点里的所有内容可理解为父组件的内容) ...

  8. Delphi动态事件深入分析（对象方法在调用的时候会传递一个隐含的Self指针，而该指针的值在EAX中。即左边第一个参数）

    Delphi动态事件深入分析 2009-2-7 作者:不得闲核心提示:本实验证明了在类中方法的调用时候,所有的方法都隐含了一个Self参数,并且该参数作为对象方法的第一个参数传递... 首先做一个空窗 ...

  9. ReactNative Android之原生UI组件动态addView不显示问题解决

    ReactNative Android之原生UI组件动态addView不显示问题解决 版权声明:本文为博主原创文章,未经博主允许不得转载. 转载请表明出处:http://www.cnblogs.com ...

随机推荐

  1. App自动化测试探索（二）MAC环境搭建iOS+Python+Appium测试环境

    环境搭建要求,MAC 机器一台,要求 Xcode 8.0以上 1. 安装 Homebrew /usr/bin/ruby -e "$(curl -fsSL https://raw.github ...

  2. Windows下载安装虚拟机和CentOS7

    1,想要在Windows系统中安装linux系统,首先需要安装一个虚拟机VMware VMware 12下载地址:https://my.vmware.com/cn/web/vmware/info/sl ...

  3. Codeforces Round #254(div2)B

    就是看无向图有几个连通块,答案就是2n-num. 范围很小,就用矩阵来存图减少代码量. #include<iostream> #include<cstdio> #include ...

  4. tar 多文件解压压缩

    tar 多文件解压:因为tar -zxvf一次值能解压一个文件,所以用xargs -n1 .先查找 ls *gz | xargs -n1 tar -zxvf .要解压的文件在list中 cat lis ...

  5. Redis底层探秘（二）：链表和跳跃表

    链表简介 链表提供了高效的节点重排能力,以及顺序性的节点访问方式,并且可以通过增删节点来灵活地跳转链表的长度. 作为一种常用数据结构,链表内置在很多高级的编程语言里面,因为Redis使用C语言并没有内 ...

  6. 笔记：加 ly 不一定是副词

    笔记:加 ly 不一定是副词 加 ly 变副词,但有些单词以 ly 结尾,长得像副词,却是形容词. costly = cost + ly a costly item. 一件昂贵的物品. lovely ...

  7. 序章：为什么学习使用kotlin、及kotlin的一些碎碎念

    为什么使用kotlin? 当然是因为项目目前的开发语言是kotlin啊! 一方面是想能够尽快适应项目,另一方面,kotlin这门语言独特的语法,确实很吸引我,也让我意识到java代码在某些程度上的繁琐 ...

  8. java代码用continue输出奇数——————————

    总结:continue用法是:在for,do-while.while循环中 并且,continue的意思是跳出循环的剩余部分,进行下一次循环.不是下一步循环 package com.b; import ...

  9. du 命令 -目前的目录所占的磁盘空间

    Linux du命令也是查看使用空间的,但是与df命令不同的是Linux du命令是对文件和目录磁盘使用的空间的查看,还是和df命令有一些区别的. 1．命令格式: du [选项][文件] 2．命令功能 ...

  10. c++ 图解快速排序算法

    第一.算法描述 快速排序由C. A. R. Hoare在1962年提出,该算法是目前实践中使用最频繁,实用高效的最好排序算法, 快速排序算法是采用分治思想的算法,算法分三个步骤 从数组中抽出一个元素作 ...