angular7+ 灵活组件 使用@input使同一组件在不同模板（template）显示不同的内容

最新推荐文章于 2022-07-25 16:13:40 发布
最新推荐文章于 2022-07-25 16:13:40 发布
阅读量306 收藏
点赞数
分类专栏： angualr7学习笔记 文章标签： typescript angular
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Orz3261/article/details/109841251
版权
这篇博客介绍了如何在Angular7+应用中，通过使用@input指令，使得同一个组件在edit.html和show.html中根据场景动态显示为input输入框或label标签。作者分享了解决这一需求的代码实现，包括组件a（org-basic-mess）的HTML和TS文件，以及父组件b和c如何传递formStatu状态来控制组件a的显示模式。
摘要由CSDN通过智能技术生成

写项目的时候遇到一个需求：a.html中内容有两个状态，当放在edit.html中的时候，a.html是input框，当在show.html中使用a.html的时候，a.html是label。

结构如图，应该是一个很简单的功能，但是因为对父子传值概念不清晰，@input使用不熟练，导致这个问题卡了一天，最后解决代码如下

代码：

a.html:

<div class="input">

     <input pInputText placeholder=

最低0.47元/天 解锁文章
故之
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序——有关清除template中的input数据问题
OneKey
07-18 2547
今天在找bug的时候出现了一点点小问题，问题就是，当引用template模板时，模板中的input是不能利用value清空的。具体实例如下：定义一个简单的布局，就一个输入框，一个按钮，点击按钮清除输入框中的内容。此时未引用template模板，直接写在WXML文件中。启动程序时，key被置为123此时界面上显示点击清除按钮后清除成功！清除原理就是把input中的value属性置为空字符串。以上是为引
不同按钮进入同一个页面显示不同的div
小花生peanut的博客
07-05 6766
页面一的按钮：&lt;div style="padding:10px 0px;"&gt; &lt;a href="#/financialStatements?byYear" class="easyui-linkbutton l-btn l-btn-large" style="width:200px;height:45px;display:inline-block;"&gt;纳税报表&am
AngularJS进阶(七)实现根据不同条件显示不同控件
热门推荐
IT全栈 华强工作室
11-20 5万+
AngularJS实现根据不同条件显示不同控件 由于项目需求，需要实现根据不同条件显示不同控件的功能。具体要求如下图所示: 即当选择“每单固定减”时，下方只显示“减免金额”一栏； 当选择“每单固定折扣”时，下方只显示“折扣比例”一栏； 当选择“每单满额减”时，下方只显示“满..减..”两栏。 根据自己对angular的了解，应该可以很轻松的实现此功能。 js设置控件
点击按钮时，显示不同的div内容
weixin_30642561的博客
04-19 2144
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><met...
按钮切换显示不同的内容(js控制)
weixin_33966095的博客
12-06 3112
今天项目发现了一个jsp页面按钮切换，下面展示模块的不同显示问题，看到同事修改完之后的效果，js控制感觉特写好，所以想写把这个好的方法js记录下来，以便以后的参考。 一：先上图，了解大概的样子，如下图 点击是的时候，下面块中的内容显示出来，同时框中的值设置为默认的值，不让自己选择输入；点击否的时候，下面的内容消失。 二、下面展示js控制的部分： /** * 产品后续交易（是...
详解Angular模板引用变量及其作用域
10-17
在Angular框架中，模板引用变量（Template Reference Variables）是一个强大的工具，它允许开发者在模板中引用DOM元素、Angular组件或指令。模板引用变量通常以`#`符号开头，用于标识和访问特定元素或组件实例。这篇...
custom-menu.7z
09-06
通过在组件模板中引用自身，可以实现无限深度的递归展示。关键在于定义一个自引用的`ng-template`，并在组件类中声明对应的`@Input`来接收当前处理的数据节点。 4. **参数路由（Parameterized Routing）**： 为了...
Angular 学习笔记
weixin_43571751的博客
04-28 2806
Angular 学习笔记环境搭建 环境搭建 安装npm，通过npm或cnpm安装angular。 npm install -g @angualr/cli 或 npm install -g @angualr/cli
div点击不同的按钮显示不同的内容和按钮样式：
Dream Space
09-18 8658
div点击不同的按钮显示不同的内容： 方法一：     New Document               1px;cursor:pointer;background-color:red" onclick="viewme()"> a onclick="viewme()"> b <div id="div3" style="float
小程序 template 玩转内容填写
silencefly的博客
05-08 454
小程序开发之旅（九）template实现文字、段落、单选框、日期、图片的输入 在小程序开发过程中，很多地方会用到一些相同的需要输入的表弟页面，具体类型有输入单行文字、多行文字、使用单选框选择、使用对话框输入时间、拍摄图片等。这些东西实际都不难，可以抽象起来使用，下面简单说说。 先看看效果 这是简单用法 这是选择日期，使用的是有赞的 这个稍微复杂一些，图片支持添加、长按删除以及多图预览 看看代码 WXML <template name="input"> <view class="
Angular 学习（七）：模板语法
Star's Tech Blog
06-24 1336
Angular数据绑定 HTML属性与DOM属性关系 少量的HTML属性与DOM属性之间有着一对一的映射关系，如id； 有些HTML属性没有对应的DOM属性，如colspan； 有些DOM属性没有对应的HTML属性，如textContent； 就算名字相同，HTML属性和DOM属性也不是同一样东西； HTML属性的值指定了初始值，DOM属性的值表示当前值；HTML属性的值不可改变，DOM属性的值...
vue3+ts+ant design vue重新封装a-input组件只能输入数字并且输入框有后缀
qq_43574615的博客
07-25 1947
vue3+ts+ant design vue input框只能输入数字
vant vue单张图片上传
不靠谱的作曲家
11-19 801
上传组件 <template #input> <van-uploader accept="file" :max-count="1" v-model="photo" :after-read="afterPhoto" /> </template> data data() { return { photo: [], } }, 事件绑定，组装成file文件 afterPhoto(file) { const tempFile = file.file
vue 插槽的简单总结及实际运用
piaojiancong的博客
12-07 521
vue 插槽
Spring环境下RedisTemplate同时配置两个数据源的数据进行同步数据
qq_42623400的博客
06-22 6281
public class JUnitTest { /** * Java数组转List集合 */ public void javaArrayToList() { String[] strArray = {"1", "2", "3"}; List<String> stringList = new ArrayList<>(); for (String str : strArray) {//这个直接循环数组.
angular html模板,AngularJs模板（Template）
weixin_34274954的博客
06-22 431
我们通过组件自带的模板来定义视图，模板以HTML形式存在，用来告诉Angular如何渲染组件(视图)多数情况下，模板看起来很像标准的HTML.......当然也有一点奇怪的地方，下面是HeroListComponent组件的一个模板。app/hero-list.component.htmlHero ListPick a hero from the list{{hero.name}}虽然这个模板使用...
angular列表页面向详情页面传值，显示不同的内容
Daylighte的博客
08-01 2685
近期项目中使用angular1.6，自己总结了列表页面向详情页面传值的问题。 需求是从此列表进入一个详情页面，需要给详情页面传入不同的值，详情页面需要接收值，显示不同的内容 &lt;a href="javascript:;"&gt; &lt;span class="btn btn-default btn-sm" ng-click='$ctrl.deal(item)' ng-if...
Angular组件通信：@Input, @Output, Service与Rxjs
我们将讲解@input、@output、setter、注入父组件、ngOnChanges、局部变量、@ViewChild、服务（service）以及RxJS Observables的使用，并对它们的适用场景进行分析。" 在Angular开发中，组件间的通信是至关重要的，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值