首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在angular 8中将所选选项值从一个组件获取到另一个组件

在Angular 8中,将所选选项值从一个组件传递到另一个组件可以通过多种方式实现,包括使用服务、本地状态管理库(如NgRx)或通过输入输出绑定(@Input() 和 @Output())。以下是使用服务和本地状态管理库的两种方法:

方法一:使用服务

  1. 创建一个共享服务: 首先,创建一个服务来共享所选选项的值。
  2. 创建一个共享服务: 首先,创建一个服务来共享所选选项的值。
  3. 在发送组件中设置所选选项: 在发送所选选项的组件中,注入SharedService并调用setSelectedOption方法。
  4. 在发送组件中设置所选选项: 在发送所选选项的组件中,注入SharedService并调用setSelectedOption方法。
  5. 在接收组件中获取所选选项: 在接收所选选项的组件中,订阅SharedService中的selectedOption$
  6. 在接收组件中获取所选选项: 在接收所选选项的组件中,订阅SharedService中的selectedOption$

方法二:使用NgRx进行状态管理

  1. 安装NgRx: 首先,安装NgRx库。
  2. 安装NgRx: 首先,安装NgRx库。
  3. 创建一个Reducer: 创建一个Reducer来管理所选选项的状态。
  4. 创建一个Reducer: 创建一个Reducer来管理所选选项的状态。
  5. 创建Actions: 创建一个Action来设置所选选项。
  6. 创建Actions: 创建一个Action来设置所选选项。
  7. 配置Store: 在AppModule中配置Store。
  8. 配置Store: 在AppModule中配置Store。
  9. 在发送组件中分发Action: 在发送所选选项的组件中,分发setSelectedOption Action。
  10. 在发送组件中分发Action: 在发送所选选项的组件中,分发setSelectedOption Action。
  11. 在接收组件中选择状态: 在接收所选选项的组件中,使用Store选择器来获取所选选项的状态。
  12. 在接收组件中选择状态: 在接收所选选项的组件中,使用Store选择器来获取所选选项的状态。

通过这两种方法,你可以有效地在Angular 8中将所选选项值从一个组件传递到另一个组件。选择哪种方法取决于你的应用复杂性和个人偏好。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何在 Windows 上安装 Angular:Angular CLI、Node.js 和构建工具指南

安装 Angular CLI 后,您需要运行一个命令来生成一个项目,并运行另一个命令来使用本地开发服务器来运行您的应用程序。...近年来,它还被用来发布前端包和库,如 Angular、React、Vue.js 甚至 Bootstrap。...注意:您可以免费下载我们的《Angular 8 书:使用 Angular 8 构建您的第一个 Web 应用程序》。...如果您想将组件、指令或管道添加到另一个模块 (主应用程序模块 app.module.ts 除外),您只需在组件名称前加上模块名称和斜杠 即可: $ ng g component my-module/my-component...结论 在本教程中,我们了解了如何在 Windows 计算机上安装 Angular CLI,并使用它从头开始初始化一个新的 Angular 项目。

61500

AngularDart 4.0 高级-路由概述 顶

当用户执行应用程序任务时,Angular路由器支持从一个视图导航到下一个视图。 本指南涵盖路由器的主要功能,通过演示可以实时运行的小应用程序(查看源代码)演示它们。...但是大多数情况下,由于某些用户操作(如点击锚标签)迫使您导航。...如上所示,您可以在AppComponent的@Component注解中将该样式与模板一起定义。 概要 该应用程序具有配置的路由。 外壳组件有一个RouterOutlet,它可以显示路由产生的视图。...以下是关键路由术语及其含义: 路由器组成部分 涵义 Router 显示活动URL的应用程序组件。 管理从一个组件到下一个组件的导航。...Routing component 一个带有RouterOutlet的Angular组件,可根据路由导航显示视图。 示例应用程序 本指南介绍了多页面路由示例应用程序的开发。

6.1K20
  • 纯前端控件集 WijmoJS 2018V2发布,在React、Vue和Angular中更易用

    WijmoJS 现在拥有了用于创建和自定义前端控件的设计器,包含两个beta版本,一个是与Visual Studio Code完美融合的设计器、另一个则是在线Web设计器,提供实时预览和编辑页面属性的功能...安装后,它会在每个Angular 框架下的WijmoJS组件上方添加“Wijmo Designer ...”操作。单击操作按钮后,它将打开一个设计界面,用于自定义该特定组件。...与顶级组件互补的子组件,如定义FlexGrid列的wjc-flex-grid-column组件,作为它们所代表的WijmoJS 类的包装器。...目前,更改类属性值不需要更改相应的属性值。...随着新版本上线,WijmoJS 添加了Web Components In Angular示例,演示了如何在Angular应用程序中使用 WijmoJS Web组件。

    7K20

    Angular系列教程-第五节

    1.模块 NgModule 是一个带有 @NgModule 装饰器的类。 @NgModule 的参数是一个元数据对象,用于描述如何编译组件的模板,以及如何在运行时创建注入器。...1.1根模块和特性模块 应用最少有一个模块(根模块) 特性模块是用来对代码进行组织的模块。 2.服务和依赖注入 服务是一个广义的概念,它包括应用所需的任何值、函数或特性。...依赖注入 在 Angular 中,要把一个类定义为服务,就要用 @Injectable() 装饰器来提供元数据,以便让 Angular 可以把它作为依赖注入到组件中。...同样,也要使用 @Injectable() 装饰器来表明一个组件或其它类(比如另一个服务、管道或 NgModule)拥有一个依赖。...3.路由 在用户使用应用程序时,Angular 的路由器能让用户从一个视图导航到另一个视图。

    2.9K20

    七、功能性组件与事件逻辑(IVX 快速开发教程)

    布尔变量打开开关则是为真,关闭开关则是为假,一般用于某些状态的设定,演示如下: 7.1.3 一维数组 在此小节之上,我们学习的变量都只能存储一个值,在 iVX 中拥有存储多个值的变量类型,如 一维数组...的内容显示到 文本组件 中,点击 循环组件 将数据来源绑定为 一维数组 值: 此时我们在 文本组件 中将内容绑定为当前数据: 循环组件 可以对数据来源的数组进行值的自动获取,循环组件 将会获取数组中的每一个值...,第 1 次自动循环将会获取第 0 个值、第 2 次循环将会获取数组中的第 2 个值,以此类推;其中 当前数据 指的是此次循环获取到数组中的值,由于 循环组件 对 文本组件 进行了循环,就意味着对该 文本组件...一维数组 我们可以当做是一种相同属性的内容,在之前我们在 一维数组 中存储的值是名字文本的集合,那么如何在一个数组中就存储名字、性别、年龄等信息呢?...以下演示通过点击 按钮组件,将一个 文本组件 的值替换成另一个 文本组件 内容。

    1.9K30

    开发者openshift4使用入门教程 - 9 - 通过IDE插件无缝衔接

    可用于OpenShift集群项目的操作 New Component-从项目中创建一个新的组件(或应用/微服务)(如: redis集群组件)。 local 本地-使用本地目录作为组件的源。...可用于项目中的应用程序的操作 New Component-在所选应用程序内创建一个新组件(如: redis哨兵组件)。 local 本地-使用本地目录作为组件的源。...Follow Log -Follow给定组件的日志。 Link Component -将组件链接到另一个组件。 Link Service -将组件链接到服务。...随后,您应该重新加载Visual Studio Code,并且资源管理器视图中将有一个OpenShift图标。...可用于项目的动作 Project -> New Application –在所选项目中创建一个新的应用程序。 Project -> Delete –删除现有项目。

    3.8K20

    AngularDart4.0 指南- 表单 顶

    本页面向您展示了如何从头构建一个简单的表单。一路上你将学习如何: 用组件和模板构建一个Angular表单。 使用ngModel创建读取和写入输入控制值的双向数据绑定。...创建一个基本的表单 一个Angular表单有两个部分:一个基于HTML的模板和一个组件类,以编程方式处理数据和用户交互。 从课程开始,因为它简要地说明了英雄编辑可以做什么。...您将展示两个Hero字段,name和alterEgo,并在输入框中将其打开以供用户输入。...您将在表单中添加一个select,并使用ngFor(先前在“显示数据”页面中看到的一种技术)将选项绑定到powers列表。...临时将另一个名为spy的模板引用变量添加到Name 标记,并使用它显示输入的CSS类。

    17.5K30

    AngularDart4.0 指南-体系结构概述 顶

    主要的Angular库是angular,大多数app模块导入如下: import 'package:angular/angular.dart'; Angular包有其他重要的库,如angular.security...HeroDetailComponent是HeroListComponent的一个子项。 ? 注意是如何在原生HTML元素中合适的存放。...用户的更改也会返回到组件,将属性重置为最新值,就像事件绑定一样。 Angular在每个JavaScript事件循环中处理所有数据绑定,从应用程序组件树的根到所有子组件。 ?...HeroService取决于日志服务和另一个处理服务器频繁通信工作的BackendService。...Router:在客户端应用程序中从一个页面到另一个页面进行导航,而不会离开浏览器 Testing:为您的应用编写组件测试和端到端测试。

    7.9K30

    AngularDart4.0 英雄之旅-教程-07路由 顶

    创建一个新的DashboardComponent。 将Dashboard绑定到导航结构中。 路由是导航的另一个名称。 路由是导航从视图到视图的机制。...为此,为了区别于其他类型的组件,这种组件类型称为路由组件。 添加一个仪表板 只有当多个视图存在时,路由才有意义。 要添加另一个视图,请创建一个占位DashboardComponent。...要在另一个包中使用资源,请使用完整的包引用,如“package:some_other_package / dashboard_component.html”。...现在添加第三个选项,一个goBack()方法,使用您之前注入的Location服务在浏览器的历史堆栈中向后导航一步。...该列表包含两个元素:目标路由的名称和设置为当前英雄id值的路由参数。

    17.6K30

    8分钟为你详解React、Angular、Vue三大框架

    显著特点 组件化 React代码由称为组件的实体组成。组件可以使用React DOM库渲染到DOM中的一个特定元素。当渲染一个组件时,可以传入被称为 "props "的值。 ?...它们也被称为 "有状态 "组件,因为它们的状态可以在整个组件中保持,并且可以通过props传递给子组件。 ? 虚拟 DOM 另一个值得注意的特点是React使用了虚拟文档对象模型,也就是虚拟DOM。...钩子只能在React函数组件中调用,不能在普通函数或类组件中调用。 定制Hooks 构建自己的Hooks,也就是所谓的自定义Hooks,可以让你把组件逻辑提取到可重用的函数中。...数据动作是一个对象,其职责是描述已经发生的事情:例如,一个数据动作描述的是一个用户 "follow"另一个用户。...特点 1、组件化 Vue 组件扩展了基本的 HTML 元素来封装可重用的代码。从高层次的角度看,组件是Vue编译器附加行为的自定义元素。在Vue中,组件本质上就是一个带有预设选项的Vue实例。

    22.2K20

    JavaScript框架比较:AngularJS vs ReactJS vs EmberJS

    JavaScript框架,如Angular.js,Ember.js或React.js,给你的代码带来结构,并保持其有序化,从而使您你的app更灵活,更具可扩展性,并更容易开发。 ?...容易导入组件,尽管具有很少的依赖性。 良好的代码重用。 非常适合JavaScript调试。 完全有可能用React增强Angular以增强麻烦的组件的性能。 完全基于组件的架构。...使用观察者来改变值,这将导致仅渲染更改的值。 通过使用附件避免“脏检查”。 更快的启动时间和固有的稳定性。 性能焦点。 友好的文档和API。 缺点: Ember.js缺少控制器级别的组件重用。...状态参数作为对象传递,并合并到React组件的内部参考状态。 使用Handlebars默认模板引擎。你必须在模型上使用特定的setter方法来更新绑定到UI的值,在Handlebars渲染页面的时候。...其他绑定选项包括一个可能性以让你的Model在View和甚至另一个Model之间用一种要么单向要么双向的绑定模式。 可重复使用的组件 Angular组件称为“指令”,它们比Ember组件强大得多。

    12.7K60

    如何成为一名Web前端开发人员?入行学习完整指南

    流体宽度 雷姆单位 移动优先 5、自定义可重用CSS组件 与其依赖大型的CSS框架(如Bootstrap),不如创建自己的模块化,可重用的CSS组件以在项目中使用。...8、一些重要工具 Web开发中将使用一些工具。这些工具将帮助你进行调试,提高生产率,管理代码,与其他开发人员合作以及类似的东西。让我们讨论其中一些工具。...Emmet是另一个很棒的工具,它允许您编写非常快速的HTML和CSS,这有助于提高开发人员的生产力。 学习使用javascript软件包管理器,例如NPM和Yarn。...如果要创建自己的模块,或者要将一个javascript文件带到另一个javascript文件,则默认情况下不能仅使用浏览器来执行此操作,因此需要Webpack或Parcel对其进行捆绑。...如果您想申请工作,那么学习一些前端框架(如React,Vue或Angular)将是很棒的。 10、前端框架和状态管理 框架使您可以进行更高级的前端开发。

    2.2K11

    Angular 5 快速入门与提高

    为了区别于JavaScript语言本身的模块概念,在本课程中将使用__NG模块__来 表示一个Angular模块。 类似于组件,NG模块就是一个应用了NgModule装饰器的类。...事实上这些复杂性是随着Angular的发展逐步引入的,从好的一方面说,是提供给开 发者的可选项逐渐增多了,适用场景变多了。...不过即使是小型的应用,由于可以只使用一个NG模块, 因此这一点的复杂性增加倒也不多,只是增加了学习和运用这个新概念的成本。 另一个显而易见的复杂性,在于多平台战略的引入。...即时 编译的第一个问题是在应用中需要打包编译器代码,这增加了最终发布的应用代码的 大小;另一个问题在于编译需要时间,这增加了用户打开应用的等待时间。...七、理解Angular的初衷 除了框架本身的功能强大导致的复杂性,Angular的另一个复杂性来源在于 其高度封装的声明式API,让开发者难以揣摩、洞察框架的实现机制,因此使用 起来就很心虚,一旦出现问题则难以分析排错

    1.8K20

    开始使用-安装 顶

    场景:多个编辑会话 许多应用程序允许用户同时打开多个任务工作.例如, 在一个预税程序中, 填表人可能操作多个税单,始终由一个值转换到另一个值....每一个税单都有如下特征: 属于它自己的税单编辑会话. 能改变一个税单不影响另一个组件的返回值. 拥有保存和取消更改税单的能力. ?...这里有一个问题:如果此服务是应用程序范围的单实例.所有组件都需要共享同一个服务实例.每个组件都可能覆盖另一个hero的税单.多么混乱!...回想每一个组件实例有它自己的注入器.在组件级别提供服务以确保每一个组件获取到它自己的实例, 服务的私有实例.没有税单被覆盖. 不混乱....组件 (B)是另一个组件 (C)的父组件, 为CarService定义更多特殊的供给器. ? 此种场景之后,每一个组件建立自己的注入器定义0, 1,或更多供给器 .

    75510

    Angular学习(02)--Angular-CLI命令

    安装的方式就不讲了,要么直接使用 WebStrom 内置的,要么借助 npm 下载一个,要么通过 WebStrom 创建的 Angular 项目的 package.json 中就会自动配置一个 cli...,选项的格式都加 -- 前缀,如 --spec=false 示例:ng g component --flat --spec=false g 是 generate 命令的别名,component 是 g...先介绍第一种方式,使用命令时,加上一些选项配置: 选项配置 说明 --export=true|false 生成的组件在对应的模块文件中,是否自动在 exports 列表中声明该组件好对外公开,默认值 false...以上,是使用 ng g component 命令时,可以携带的一些选项配置,来修改默认的行为,其中,如果选项配置为 true,那么 value 值可以省略,如 --flat=true 可以简写成 --flat...另外,为什么非得用 Angular-CLI 命令来创建文件,用 WebStrom 自己创建个 ts 文件不行吗?

    2.6K10
    领券