如何使用 @output 将布尔值从子级发送到父级

2023-12-20

嗨,有角的社区,

我想使用 @Output 触发一个事件来隐藏或打开/关闭包含其他组件的 div。这很简单,但我以前从未使用过 EventEmitter,所以我希望当调用 hideDem 时,它会根据来自 child.ts 的其他属性隐藏或打开/关闭 div

孩子.html:

 <img type="button" label="Click" (click)="hideDem()" id="foldup" src="./assets/img/fold_up_blacksmall.png"/>

子.comp.ts:

@Output() open: EventEmitter<any> = new EventEmitter();
@Output() close: EventEmitter<any> = new EventEmitter();

public hideDem(): void {
  this.hideMePartially = !this.hideMePartially;
  if (this.hideMePartially) {
    this.open.emit(true);
  } else {
    this.close.emit(false);
  }
}

父级.comp.html

 <div class="daydetail"> 
<div><my-daydetail [showMePartially]="showVar" ></my-daydetail></div>
  <div [hidden]="(close)=hideDem($event)">
    <div>
       <app-pie-chart [minifiedMe]="hideMeup" ></app-pie-chart>
     </div>
     <div>
       <app-fonctionnaly [minifiedMe]="hideMeup"></app-fonctionnaly>
     </div>
     <div>
       <app-my-verticalchart [minifiedMe]="hideMeup" ></app-my-verticalchart>
     </div>
     <div>
       <app-dysfonction [showMePartially]="hideVar"></app-dysfonction>
     </div>
   </div> <!-- End of hidden-->
</div> <!-- End of daydetail-->

[hidden]="(close)=hideDem($event)"

是无效标记。(close)不能位于另一个绑定的表达式内。

<my-daydetail [showMePartially]="showVar" 
    (close)="isHidden = true" (open)="isHidden = false"></my-daydetail>
  <div [hidden]="isHidden">
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 @output 将布尔值从子级发送到父级 的相关文章

  • Angular2排序数组用于在html中的*ngFor中显示

    我正在循环浏览所有帖子 li 当显示每个帖子的日期时 我会执行以下操作 post date date yyyy MM dd HH mm ss 我想要做的是按最新的第一个顺序显示所有帖子 我尝试过使用类似的管道 li li import Pi
  • 在电子打印中构建的角度应用程序显示空白窗口

    我开发了一个角度应用程序 然后在电子中构建该应用程序 该应用程序工作正常 但是当我单击按钮打印特定 div 时 它会打开一个电子的空白窗口 我用ngx print图书馆 它在角度服务方面效果很好 但在电子构建方面遇到了问题
  • Angular 4在下一行显示p标签的换行符

    我有一个 Angular 4 页面 我必须在其中显示用户评论列表 用户可以多行输入评论 我想在多行中绑定文本 我想显示以 n在新行中 我努力了 p p p comment text p 我不想更换 n with br 标签 我想要别的东西
  • gyp ERR,Npm 无法获取本地颁发者证书

    我正在致力于 Windows 10 的全新安装 唯一的事情是我安装了 cygwin 以在 cmd 中获取 unix 命令 当我打字时npm install g angular cli它下载了必要的文件 但我收到错误 gyp ERR conf
  • 浮动标签和占位符重叠

    div class form group form default form spacing div
  • Angular 2 Observable 具有多个订阅者

    我有一个 Angular 2 服务 可以从 API 获取数据 该服务有 3 个订阅者 在组件中定义 每个订阅者都对数据执行其他操作 不同的图表 我注意到我正在向 API 发出三个 GET 请求 而我想要实现的是一个请求 并且订阅者将共享数据
  • 数字和文本列的垫排序问题

    我有角度材料数据源 角度材料版本是 5 0 3 排序正在进行中 但是对于某些列 它的排序不正确 那里有数字和文字 例如 排序结果如 XXX 1 1tesxt 1 OPD OXD 12
  • 如果禁用,Scss 会更改 mat-checkbox 的颜色

    在我的组件的 scss 文件中 我可以在选中时设置 mat checkbox 的背景颜色 deep mat checkbox checked mat accent mat checkbox background mat checkbox i
  • mat-tab-group 不是 Angular 9 中的已知元素

    我正在使用 Angular 9 和 Angular Material 9 2 4 我正在尝试使用mat tab 组在我的 component html 中 但我不断收到错误 mat tab group is not a known elem
  • 如何向离子推送通知添加操作按钮?

    我想向离子推送通知添加一些操作按钮 我正在使用科尔多瓦pushv5 通知工作正常 但我不知道如何添加这些按钮 如何添加这些按钮 应在 POST 请求中添加操作按钮 registration ids my device id data tit
  • 无法在 Angular 10 中的“pdf-viewer”=>“ng2-pdf-viewer”中显示 blob url

    我有一个 API 它将上传的文件作为 blob 返回 当我尝试绑定时src如果使用 blob URL 则它不会显示任何内容 但是 当我尝试绑定直接 URL 时 它可以显示 PDF 文件 这是我下面给出的代码 我的 TS 代码 downloa
  • 如何测试包含自定义表单控件的组件?

    我有一个这样的组件 Component selector app custom form control templateUrl
  • 避免在 Angular 2+ 中嵌套订阅?

    我有2个端点 1 个端点来获取当前用户的日志 1 个端点来获取该用户的授权 实际上我使用 this user subscribe e gt this grants get e subscribe x gt console log x 但这是
  • 如何使用 Angular 2 动画实现翻转效果?

    我一直在我的项目中使用纯CSS翻转卡片 但这个解决方案不是合适的 有人可以通过点击按钮来呈现角度 2 的翻转吗 我在 angularjs 中找到了一个https codepen io Zbeyer pen oXQrZg https code
  • 在 Angular 中深度复制对象

    AngularJS 有angular copy 深度复制对象和数组 Angular 也有类似的东西吗 您还可以使用 JSON parse JSON stringify Object 如果它在你的范围内 那么它就存在于每个 Angular 组
  • 在停止调试时终止 VS Code 中的 ng 服务任务

    我有一个 Angular 项目 目前正在通过 chrome 调试器在 vs code 内进行调试 我的launch json uses preLaunchTask serve 其中服务定义于tasks json as ng serve 这样
  • 415 不支持的媒体类型; Angular2 到 API

    我是 Angular 2 的新手 我面临着一个无法找到解决方案的问题 当我尝试从 Angular 2 发布到 API 时 我得到 415 不支持的媒体类型 角度2代码 onSubmit value any console log value
  • Angular 2 ngModel 不工作(仅限 javascript)

    所以我是 Angular2 javascript 的新手 我能够通过 5 分钟的 Angular 教程制作一个简单的 Hello world 我对 Angular2 的新变化很好奇 我开始阅读 Angular2 Js 文档 但我发现它不完整
  • 编辑角度材质的表格单元格填充

    当我使用开发人员工具检查该元素时 它显示零填充 但是当我查看它并将鼠标悬停在它上面时 它非常清楚地在单元格内具有填充 我不知道这是从哪里来的 并且设置td padding 0 important 什么也没做 感知到的填充是由以下原因引起的d
  • 全局未在 ../node_modules/socket.io-parser/is-buffer.js 中定义

    预先感谢您帮助我 我正在尝试在我的一个角度组件中连接套接字 但在浏览器的控制台中它会抛出一个错误 指出 Global 未在 Object node modules socket io parser is buffer js 中定义 这是我的

随机推荐

  • 正确放置 ASP .NET MVC 应用程序中的外部 javascript-per-view 文件

    在 ASP NET MVC 应用程序中 放置每个视图特有的外部 javascript 文件的正确文件夹是什么 大多数视图都需要我计划在外部文件中编写的 javascript 代码 但我不确定是否应该将它们放在视图旁边或 Scripts 文件
  • React Native 中的侧边栏菜单与反应导航

    我在用react navigation in React Native我想创建一个侧边栏菜单 它作为从左到右的覆盖层打开 并填充大约 80 90 的宽度 如果没有反应导航 这可以通过诸如react native side bar 但我想知道
  • 泛型类和静态字段

    有没有一种方法可以在多个不同的泛型类之间共享一个静态变量 我有课 class ClassA
  • 如何在 Apache POI 中设置固定列宽

    如何在 Apache POI 中设置固定列宽 我想将我的第一列设置为固定宽度 我尝试过使用sheet setColumnWidth 0 1000 cellStyle setWrapText true 设置它不反映的自动换行 public X
  • 使用内置本地数据库或隔离存储

    本地数据库现已内置于 Windows Phone 7 5 Mango 中 我正在考虑存储一些不相关的数据集合的场景 使用本地数据库非常简单 而使用独立存储则需要更多的自定义开发 还有一些替代解决方案 例如 FileDb 在芒果前的讨论中提到
  • Django-DB-Migrations:无法更改表,因为它有待处理的触发事件

    我想从 TextField 中删除 null True footer models TextField null True blank True footer models TextField blank True default 我创建了
  • WPF 重复元素

    我有一个 UserControl 它是一个按钮 具有某些特征 并且我有一个窗口 其中有几个 正常 样式的按钮 在同一个窗口上 我定义了一种样式来覆盖一些正常特征 并且我想要其中的一些 有点像键盘布局 我拥有的是一个包含 30 行的 Unif
  • Django 查询非常慢

    我的 Django 应用程序有问题 模型查询Scope速度非常慢 经过一些调试后我仍然不知道问题出在哪里 当我像这样查询数据库时scope Scope objects get pk Esoterik I 需要 5 到 10 秒 数据库只有不
  • openstack 网络无法从虚拟机 ping/ssh 到虚拟机

    我已经使用 devstack 脚本安装了多节点 openstak 可以运行虚拟机 但存在网络问题 无法从一个虚拟机 ssh ping 到另一虚拟机 我只能从运行该虚拟机的主机 control1 computeX 通过 ssh 连接到虚拟机
  • 动态修改 Tapestry 5 中的 FormInjector 上下文信息

    我当前的问题是关于动态更新上下文信息FormInjector 我之前的问题在 Tapestry 5 中更新表单内的区域 https stackoverflow com questions 2966750 updating a zone in
  • 使用 jFreeChart 在多个图形中绘制多个图形

    我正在尝试使用 jFreechart 生成两个数字 每个数字有 12 个图表 在 jFreeChart 中称为系列 然而 有些图表被简单地跳过了 我知道我在这里遇到同步问题 并尝试使用用户 trashgod 提供给我的方法here http
  • Python json.dumps() 输出缩小的json?

    有没有办法让python的json dumps
  • 如何在 Azure AD B2C 中停用和重新激活用户

    有什么方法可以停用并重新激活 Azure AD B2C 用户 我想实现切换 Azure AD 用户状态的功能 如果 停用并重新激活 是指阻止用户登录 目前 这仅适用于本地帐户 不适用于来自社交提供商的帐户 Facebook Google 等
  • 如何设置SWFUpload上传的文件夹?

    我在文档中没有看到如何使用 SWFUpload 设置上传的文件文件夹 有人能指出我正确的方向吗 如果有帮助的话我正在使用 PHP 5 您所做的就是调用 PHP 脚本 该脚本会处理文件上传 您可以打开调试 这将为您提供一个非常好的调试视图 了
  • gridview 中的分页

    我的网格视图
  • 动态缩略图/调整图像大小生成[重复]

    这个问题在这里已经有答案了 可能的重复 PHP 动态调整图像大小与存储调整大小的图像 https stackoverflow com questions 2823600 php image resize on the fly vs stor
  • 未找到 glib.h 和 gtk.h

    大家好 我有一个程序 其中包括 gtk gtk h glib h 我使用过以下命令 sudo apt get install libgtk2 0 dev glib sudo apt get install glade 但我仍然收到 glib
  • 本机 xml 数据库中的唯一性插入

    我正在开发一个基于XML 的项目 我使用 Sedna 数据库来存储我的集合 其中包含 XML 文件及其 XSD 架构文件 我在这些方案中定义了主键 唯一键 但到目前为止我可以将重复值 通过 XQuery 更新插入命令 插入到主键字段中 为了
  • 内存泄漏和处置

    我可能不理解这个概念或者我做错了什么 我对 NET 中的内存管理有一些疑问 想象一下情况 Form1是大人窗体 作为 MDI 父级和一点FormChild 被绑定为子项 public partial class Form1 Form pub
  • 如何使用 @output 将布尔值从子级发送到父级

    嗨 有角的社区 我想使用 Output 触发一个事件来隐藏或打开 关闭包含其他组件的 div 这很简单 但我以前从未使用过 EventEmitter 所以我希望当调用 hideDem 时 它会根据来自 child ts 的其他属性隐藏或打开