如何从聚合物组件访问父模型

2023-12-10

我将 my-app 作为 index.html 文件中的主要应用程序组件,并使用 model.dart 作为其模型,这是我的应用程序模型。

my-app 以 my-component 作为其内容。当用户与 my-component 交互时,我需要更新 model.dart 中的值。

<my-app>
   <my-component></my-component>
</my-app>

我认为的一种方法是访问 my-component dart 文件中的 my-app 并使用其 model 属性来访问 model.dart。

这是访问应用程序模型的正确方法吗?另外如何从我的组件中获取我的应用程序?


我认为让子组件了解其父组件并不是一个特别好的模式。

但你是对的,子组件中发生的事情通常会更改父组件中或绑定到父组件的模型中的值。对于这样的情况,我发现孩子可以调度一个事件,而父母可以选择与该事件交互,因为它认为合适。

调度事件就像执行以下操作一样简单(这是class MyComponent):

dispatchEvent(new CustomEvent('foo'));

父级可以像这样监听该事件:

<my-app>
  <my-component on-foo="{{someMethodOnTheParent}}"></my-component>
</my-app>

实际上,孩子只是简单地广播发生了一些事情,但无法控制父母如何(甚至是否)做出反应。如果<my-component>由不同的父级使用,该父级可以选择以不同的方式响应自定义事件:

<another-element>
  <my-component on-foo="{{someOtherMethod}}"></my-component>
</another-element>

在父级中触发的回调几乎可以执行任何操作,包括修改模型。

希望有帮助。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何从聚合物组件访问父模型 的相关文章

随机推荐

  • 我如何使用 python 从键盘发送命令。我正在尝试自动化 mac 应用程序 (GUI)

    我正在尝试使用 python 自动化应用程序 我需要帮助通过 python 发送键盘命令 我正在使用 powerBook G4 您可以使用 osascript 工具从 python 脚本调用 AppleScript import os cm
  • 如何查找 PDF 中所有出现的特定文本并在上方插入分页符?

    我对 PDF 有一个棘手的要求 我需要在 pdf 中搜索特定字符串 属性编号 每次找到这个 我都需要在上面添加一个分页符 我可以访问 IText 和 Spire PDF 我首先查看 IText 我从这里的其他帖子中确定我需要使用 PDF S
  • 保留实体框架查询缓存

    我有一个 ASP NET MVC 5 Web 应用程序并使用 EF 6 1 访问我的数据库 我有一些相当复杂的 LINQ 查询 编译需要长达 10 秒的时间 但执行后只需几毫秒 EF 确实会很好地缓存此查询 并且第二次执行查询时 它会在这几
  • 从 Mac 测试 IE 的最佳工具 - 无需 PC [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心以获得指导 测试网站设计的跨浏览器兼容
  • 两个带有 count 的语句相除返回零

    我是 SQL 新手 使用 SQLiteStudio 并且正在尝试使用一些聚合函数 我想找到数据子集中个体数量小于 575 的比例 但查询始终返回零 SELECT A B 100 FROM SELECT COUNT AS A FROM Mal
  • 使用 RequestBody 的 POST 请求不起作用

    在下面的示例中 我使用 POST 和 GET 方法 post 是初始化一个变量 GET 是获取这个变量 我使用 Postman 来发出请求 我收到错误 RequestBody value val cant resolve method va
  • 使用自定义属性有效吗?

    我想取消任何链接并为每个链接添加额外的属性 下面是我是如何实现这一目标的 function anularEnlaces nav a each function var href this attr href var id this attr
  • C# 按字母顺序和长度对 Arraylist 字符串进行排序

    我正在尝试排序ArrayList of String Given A C AA B CC BB Arraylist Sort gives A AA B BB C CC 我需要的是 A B C AA BB CC ArrayList list
  • +0和-0一样吗?

    阅读通过ECMAScript 5 1 规范 0 and 0是杰出的 那么为什么呢 0 0评估为true JavaScript 使用IEEE 754 标准来表示数字 从维基百科 签名零为零并带有相关符号 在普通算术中 0 0 0 然而 在计算
  • Android 应用程序 - 如何获取联系人的生日

    我正在开发一个 Android 应用程序 我需要将每个联系人的生日与当前日期进行匹配 如果是的话 则处理一些业务逻辑 这需要完整的联系人详细信息 我找到了分别读取联系人生日或联系人本身的方法 但对如何将两者结合起来感到困惑 有人可以提供一些
  • 如何用段落标签包围所有文本片段? [关闭]

    Closed 这个问题需要多问focused 目前不接受答案 我想在任何文本项周围放置段落标签 因此应该避免表格和其他元素 我怎么做 我想它可以用某种方式制成preg replace 以下是一些可以帮助您完成您想做的事情的函数 nl2p T
  • Yii2 gridview - 模式仅在单击第一行时显示

    我正在使用 kartik grid GridView 和 kartik grid ExpandRowColumn 来显示摘要信息 在 ExpandRowColumn 上 我有另一个 gridview 来列出详细信息 这部分工作正常 在 Ex
  • swift 3 Playground 中的回调[重复]

    这个问题在这里已经有答案了 您好 我正在尝试在操场上执行这行代码 但得到任何响应输出 我的代码如下 func testCallbackEmpty callback escaping gt Void DispatchQueue main as
  • 如何在 WordPress 插件中使用多媒体上传器?

    我尝试在 WordPress 插件中添加多重上传选项 我在插件中重复了此代码 两次 仅更改了 id 名称
  • 我可以使用反射访问 ItemsControl 的 ItemsHost 吗?

    我正在创建自定义ItemsControl这是源自DataGrid 我需要访问 ItemsHost 这是Panel实际上包含行DataGrid 我见过一些丑陋的技巧来做到这一点 但我认为它们比使用反射更糟糕 那么我可以使用反射访问 Items
  • 如何使用/导入http模块?

    我一直在玩Angular 2 快速入门 如何在 Angular 2 中使用 导入 http 模块 我看过Angular 2 Todo s js 但它不使用 http 模块 我已经添加 ngHttp angular http to depen
  • to_number Oracle SQL 中数字格式的动态长度

    我有一个表 其中的数字存储为varchar2和 作为小数点分隔符 例如 5 92843 我想使用 来计算这些数字 因为这是系统默认值 并且使用了以下内容to number去做这个 TO NUMBER number 99999D9999 NL
  • Neo4j 桌面打开时出错 - “无法读取未定义的属性“名称”

    我有一个运行 Windows Server 2016 的盒子 我在这里找到了有关 MAC 的问题的答案 neo4j 初始化错误 TypeError 无法读取未定义的属性 名称 这个答案似乎在 Windows 中不起作用 因为删除 AppDa
  • PHP 通过键和值创建数组

    我在下面的 PHP 代码中有一个数组 我想将该数组转换为按数据值分组 简化数组总是很困难 Array 0 gt Array video id gt 14 video title gt test1 video category name gt
  • 如何从聚合物组件访问父模型

    我将 my app 作为 index html 文件中的主要应用程序组件 并使用 model dart 作为其模型 这是我的应用程序模型 my app 以 my component 作为其内容 当用户与 my component 交互时 我