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

将数据从AppComponent传递到另一个在不同时间加载的组件

在Angular框架中,可以通过以下几种方式将数据从一个组件传递到另一个在不同时间加载的组件:

  1. 使用Input装饰器:在发送数据的组件中,通过在目标组件的属性上使用Input装饰器,将数据作为属性绑定传递给目标组件。在目标组件中,通过接收输入属性的方式获取传递过来的数据。这种方式适用于父子组件之间的数据传递。示例代码如下:
  2. AppComponent.ts:
  3. AppComponent.ts:
  4. ChildComponent.ts:
  5. ChildComponent.ts:
  6. 使用服务(Service):创建一个共享的服务,通过该服务在组件之间共享数据。在发送数据的组件中,将数据存储在服务中的属性中。在接收数据的组件中,通过依赖注入方式获取服务实例,并从服务中获取数据。这种方式适用于非父子组件之间的数据传递。示例代码如下:
  7. DataService.ts:
  8. DataService.ts:
  9. SenderComponent.ts:
  10. SenderComponent.ts:
  11. ReceiverComponent.ts:
  12. ReceiverComponent.ts:
  13. 注意:为了使服务在整个应用程序中可用,需要将其提供给根注入器(root injector)。
  14. 使用路由参数:如果两个组件通过路由进行导航,可以使用路由参数将数据传递给目标组件。在发送数据的组件中,通过路由导航时传递参数。在接收数据的组件中,通过ActivatedRoute服务获取路由参数。示例代码如下:
  15. app-routing.module.ts:
  16. app-routing.module.ts:
  17. SenderComponent.ts:
  18. SenderComponent.ts:
  19. ReceiverComponent.ts:
  20. ReceiverComponent.ts:

以上是三种常用的将数据从一个组件传递到另一个在不同时间加载的组件的方法。根据具体的场景和需求,选择适合的方式进行数据传递。

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

相关·内容

AngularDart4.0 英雄之旅-教程-06服务 顶

随着“英雄之旅”应用的发展,您将添加更多需要访问英雄数据的组件。 不是一遍又一遍复制和粘贴相同的代码,而是创建一个可重用的数据服务,并将其注入到需要它的组件中。...你开始的地方 在继续英雄之旅之前,请确认您具有以下结构。 如果没有,请返回前面的页面。 ? 如果该应用程序尚未运行,请启动该应用程序。 在进行更改时,请通过重新加载浏览器窗口来保持运行。...创建一个英雄服务 利益相关者希望以不同的页面以各种方式展示英雄。 用户可以从列表中选择一个英雄。 不久,您将添加一个仪表板与顶尖的表演英雄,并创建一个单独的视图编辑英雄的细节。...HeroService,从AppComponent开始。...通过将AppComponent锁定到HeroService的特定实现中,切换实现用于不同的场景(如离线操作或使用不同的模拟版本进行测试)将很困难。

3K10
  • 一个Angular 5教程:一步一步指导实现你的第一个Angular 5应用程序

    但在基本层面上,请考虑如下这些方法:在创建组件之后立即调用构造函数,在传递给它的数据准备好并填充之前很久才调用该构造函数,而ngOnInit仅在第一个更改周期数据,因此您可以访问组件输入。...AppComponent?但AppComponent将在应用程序中的其他任何内容之前加载,因此我们必须认为它是整洁而小巧的。我们最好再创建一个组件来照顾存储卡片列表并将其显示在我们的页面上。...使用本地事件 所以我们有我们的变量填充,但我们仍然需要将该值发送到AppComponent中的卡列表。为了将数据传递给Angular组件,我们必须有输入。...看起来,要在组件外部传递数据,我们有输出,而且我们使用输入的方式 - 我们从Angular代码中导入它,并使用装饰器来定义它: import {Component, EventEmitter, OnInit...这就是你如何将效果集成到从服务器加载数据的过程。但是我们仍然需要将其发回到我们的卡片创建中。让我们来做这件事吧。

    42.7K10

    优化 React APP 的 10 种方法

    在同一线程上运行一个长进程将严重影响UI呈现代码,因此最好的选择是将进程移至另一个线程。这是由Web工作人员完成的。它们是我们可以在其中创建线程并与主线程并行运行而不妨碍UI流程的网关。...7.延迟加载 延迟加载已成为现在广泛用于加快加载时间的优化技术之一。延迟加载的前景有助于将某些Web应用程序性能问题的风险降至最低。...为了在React中延迟加载路由组件,使用了React.lazy()API。 延迟加载已成为现在广泛用于加快加载时间的优化技术之一。延迟加载的前景有助于将某些Web应用程序性能问题的风险降至最低。...呈现AppComponent时,将加载mycomponent.bc4567.js文件,并且包含的 MyComponent将显示在DOM上。 8....10. shouldComponentUpdate() React应用程序由组件组成,从根组件(通常是App.js中的App)到扩展分支。

    33.9K20

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

    创建一个新的DashboardComponent。 将Dashboard绑定到导航结构中。 路由是导航的另一个名称。 路由是导航从视图到视图的机制。...从英雄名单到选定的英雄。 从“深层链接”网址粘贴到浏览器地址栏中。 路由到英雄细节 您可以在AppComponent中添加到HeroDetailComponent的路由,其中定义了其他路由。...仪表板英雄应显示在一排矩形。 为此目的,您已经收到了大约60行CSS,包括一些简单的媒体查询响应式设计。 正如您现在所知,将CSS添加到组件样式元数据将会隐藏组件逻辑。...你走过的路 以下是您在此页面中所取得的成果: 您添加了Angular路由器来浏览不同的组件。 您了解了如何创建路由器链接来表示导航菜单项。 您使用路由器链接参数导航到用户选择的英雄的细节。...您仍然缺少一个关键部分:远程数据访问。 在下一页中,您将使用http从服务器检索到的数据替换模拟数据。

    17.6K30

    模块化开发 Angular 应用

    想要更好地理解 Angular 应用程序所有的不同构建的模块? 在这篇文章中,我们将走进模块的内容。 在 angular 应用中,模块是共享和重用代码的好方法。...然后,我们将学习怎么使用我们的模块来启用延迟加载,从而使应用更小,使用户体验更好。 我们开始吧! App Module 在 Angular 里面,一切皆可组织成模块。...这意味着,我们的模块在导入时将这些模块提供给其他模块。否则,这些模块将停留在模块内部,无法从外部访问。...也可以延迟加载模块。这是什么意思呢? Angular 程序的下载体积很大。根据你的用户场景,这是一个很大的问题。特别是在移动端,加载一个应用程序可能需要耗费很长时间。...减少加载时间的一种方法是将应用程序拆分成模块。 当你以惰性方式加载模块时,它不会包含在初始的程序中。相反,它仅在需要的时候才下载。为啥要下载我们还没用得上的组件呢,是吧? 那么,它是怎么工作的?

    3.1K10

    Angular2 组件(页面)之间如何传值

    组件有两种方式将数据传递:“属性绑定”和“事件绑定”。 在Angular 2中,数据和事件变化检测从上到下发生从父级到子级。...执行后展示的形态 @outputs 从组件发送数据,它接受组件向其父组件公开的输出参数的列表。...执行结果 @input + @output 绑定定义组件的公共API。在我们的模板中,我们使用 [方括号] 传递输入,使用(括号)来处理输出。 组件的要点不仅是封装,而且是可重用性。...-- 绑定到父作用域 --> @outputs 从组件发送数据,请先定义outputs属性。...它接受组件向其父组件公开的输出参数的列表。 关于双向绑定 双向数据绑定使用ngModel指令将输入和输出绑定组合为单个符号。

    4K50

    Angular 2.x折腾记 :(2)初步认识angular2,不一样的开发模式

    ,安装里面对应的腻子(polyfill),文件内有详细的注释 typings.d.ts : 全局变量声明的文件 testconfig.*.json: 不同模式下调用的tsconfig配置文件 app目录下.../app.component.css'] // 组件自身的样式 }) // 导出对应的组件 export class AppComponent { title = 'app works...,ng2的开发模式就是类似一个树,从根节点无限发散 import { NgModule } from '@angular/core'; // 表单模块,比如你要在组件内用到一些表单元素或者数据绑定.../app.component'; @NgModule({ declarations: [ // 指令和组件的放在这里 AppComponent...总结 这一篇没有涉及到路由这些和表单这些; 准备拆成两个文章来说; 路由的配置及懒加载这些, 模板驱动的表单及响应式表单[嵌套表单响应等],回车键触发搜索等。。

    10810

    Angular 应用是怎么工作的?

    如果你使用旧版的 Angular,比如版本 4 或 5 ,你会注意到没有 angular.json 这个文件,取而代之的是 angular-cli.json 文件。...别在意,都是表达同样内容的文件,只是命名不同而已。 angular.json 包含应用的所有配置信息。Angular builder 将通过这份文件,查找到应用的入口。...因此,bootstrapping 就像是一种装置或说一种加载的技术,启动 Angular 应用。当我们加载组件或者模块的时候,它将被渲染。 现在,我们找到了应用入口。...} 在这个 AppModule 中,在 @NgModule 装饰器中,我们有一个引导 bootstrap 数组,表明加载 AppComponent。...index.html 这个文件最终调用根组件,也就是 app-root ,这个组件在文件 app.component.ts 中被定义。如下index.html 文件。 <!

    1.5K30

    Angular 从入坑到挖坑 - 模块简介

    三、Step by Step 3.1、前端模块化 前端模块化是指将程序中一组相关的功能按照一定的规则组织在一块,整个模块内部的数据和功能实现是私有的,通过 export 暴露其中的一些接口(方法)与系统中的别的模块进行通信...、HttpClientModule 这种 Angular 内置的库也都是一个个的 NgModule,在开发中通过将组件、指令、管道、服务或其它的代码文件聚合成一个内聚的功能块,专注于系统的某个功能模块...,因此,可以通过添加到 providers 数组中,提供给别的模块使用 bootstrap Angular 应用通过引导根模块来启动的,因为会涉及到构建组件树,形成实际的 DOM,因此需要在 bootstrap...数组中添加根组件用来作为组件树的根 3.3、特性模块 特性模块是用来将特定的功能或具有相关特性的代码从其它代码中分离出来,聚焦于特定应用需求。...惰性加载可以减小初始包的尺寸,从而减少程序首次的加载时间 import { BrowserModule } from '@angular/platform-browser'; import { NgModule

    1.8K20

    开始使用-安装 顶

    如果组件的注入器没有提供者, 它将向上传递请求到父组件的注入器.如果此组件无法满足请求, 它继续沿着此组件自己的父注入器传递....如果您只指定顶级供应商(通常是根AppComponent),则注入器树看起来是平坦的。 所有请求都会冒泡到您使用bootstrap方法配置的根注入器。...组件注入器 能够在不同级别配置一个或多个提供商开辟了有趣和有用的可能性。 场景:服务 隔离建筑学的思路引导你限制访问应用程序的服务所属的域名....如果在今后VillainsService发生更改, 你可能需要在hero组件的某个地方中断某些操作. 这不仅发生在想象中以致提供服务的AppComponent将产生风险....元数据中提供VillainsService, 服务将仅仅在VillainsListComponent和其子组件树中可用.

    75510

    Angular 2 + 折腾记 :(2)初步认识angular2,不一样的开发模式

    ,安装里面对应的腻子(polyfill)..有详细的注释 typings.d.ts : 全局变量声明的文件 testconfig.*.json: 不同模式下调用的tsconfig配置文件 app.../app.component.css'] // 组件自身的样式 }) // 导出对应的组件 export class AppComponent { title =...,ng2的开发模式就是类似一个树,从根节点无限发散 import { NgModule } from '@angular/core'; // 表单模块,比如你要在组件内用到一些表单元素或者数据绑定..., |是管道,支持多个管道,支持内置管道和自定义管道,:跟随是管道的参数,后续文档我写一个如何自定义管道的文章 []="":绑定组件内的值[单向,数据流向视图],指令,原生html控件的自身属性[value...---- 总结 这一篇没有涉及到路由这些和表单这些; 准备拆成两个文章来说; 路由的配置及懒加载这些, 模板驱动的表单及响应式表单[嵌套表单响应等],回车键触发搜索等。。

    6.2K20

    AngularDart4.0 英雄之旅-教程-03英雄编辑器

    ', 刷新浏览器,页面将显示标题和英雄名 双大括号是Angular插值绑定语法。 这些插值绑定将组件的标题和英雄属性值作为字符串显示在HTML标题标签内。...在“显示数据”页面中阅读有关插值的更多信息。 Hero对象 英雄需要更多的属性。 将英雄从文字字符串转换为类。 创建一个具有id和name属性的Hero类。...类中,将组件的英雄属性重构为Hero类型,然后将其id初始化为1,name为Windstorm。...', 刷新浏览器,页面将显示英雄名 组合HTML和多行模板字符串 要显示所有英雄的属性,请为英雄的id属性添加一个,并为英雄的名称添加另一个。...数据在两个方向流动:从属性到文本框,从文本框返回到属性。 在表单和模板语法页面中阅读有关ngModel的更多信息。 @Component(指令:...)

    3.2K10

    Angular 从入坑到挖坑 - Router 路由使用入门指北

    Angular 从入坑到弃坑 - Angular 使用入门 Angular 从入坑到挖坑 - 组件食用指南 Angular 从入坑到挖坑 - 表单控件概览 Angular 从入坑到挖坑 - HTTP...4.2、路由间的参数传递 在进行路由跳转时,很常见的一种使用情况是我们需要将某些数据作为参数传递到下一个页面中,例如从列表中选择点击某一行数据,跳转到对应的详情页面 常见的参数传递有如下的两种方式 4.2.1...4.2.2、动态路由传递 与使用查询参数不同,使用动态路由进行参数传值时,需要我们在定义路由时就提供参数的占位符信息,例如在下面定义路由的代码里,对于组件所需的参数 newsId,我们需要在定义路由时就指明...与使用 query 查询参数传递数据不同,此时需要将跳转的链接与对应的参数值组合成为一个数组参数进行传递 import { Component, OnInit } from '@angular/core...-- 加载子路由的数据 --> 子路由组件渲染的出口 ?

    4.2K50

    AngularDart4.0 高级-层级依赖注入器 顶

    如果组件的注入器没有提供者, 它将向上传递请求到父组件的注入器.如果此组件无法满足请求, 它继续沿着此组件自己的父注入器传递....如果您只指定顶级供应商(通常是根AppComponent),则注入器树看起来是平坦的。 所有请求都会冒泡到您使用bootstrap方法配置的根注入器。...组件注入器 能够在不同级别配置一个或多个提供商开辟了有趣和有用的可能性。 场景:服务 隔离建筑学的思路引导你限制访问应用程序的服务所属的域名....如果在今后VillainsService发生更改, 你可能需要在hero组件的某个地方中断某些操作. 这不仅发生在想象中以致提供服务的AppComponent将产生风险....元数据中提供VillainsService, 服务将仅仅在VillainsListComponent和其子组件树中可用.

    86610

    Angular 启用预加载

    在使用路由延迟加载中,我们介绍了如何使用模块来拆分应用,在访问到这个模块的时候, Angular 加载这个模块。但这需要一点时间。在用户第一次点击的时候,会有一点延迟。...我们可以通过预加载路由来修复这个问题。路由可以在用户与其它部分交互的时候,异步加载延迟的模块。这可以使用户在访问延迟模块的时候更快地访问。 本文将在上一个示例的基础上,增加预加载的功能。...在上一节中,我们的根路由定义在 main.routing.ts,我们在 app.module.ts 中使用了根路由定义。 需要注意的是,Home 组件是提前加载的。我们将在系统启动之后渲染这个组件。...在 Angular 渲染 Home 组件之后,用户就可以与应用交互了,我们可以通过简单的配置在后台预加载其它模块。 启用预加载 我们在 forRoot 函数中,提供一个预加载的策略。...加载指定模块 我们还可以在路由中定义附加的参数来指定哪些模块进行预加载,我们使用路由定义中的 data 来提供这个附加的数据。

    1.5K00

    Angular学习(01)-架构概览

    Angular架构概览.png 画了这个图来大概表示下 Angular 的架构概览,基本涉及到一些常见的重要的知识点了,比如: 模块 路由 组件 模板 服务 指令 管道 不同的类型,文件名通常会都按照一定的规范来命名...它的用途,在于,将数据按照一定的规则进行转换,比如 Object 对象,转换成 json 格式数据,再比如,long 型的时间,转换成具体的时间日期等等。... 就是根组件 AppComponent (自动生成的)的组件标签,当 Angular 在 HTML 文件中发现有组件标签时,就会去加载该组件所属的模块,并去解析组件的模板文件...表示该文件角色是模块,并在内部配置了它的组件 AppComponent,这样 AppComponent 组件就只属于该模块了,并能够在该模块内的其他组件中被使用。...,但交由其子视图来控制,所以,当导航到 home 时,home 模块会去加载它内部的 HomeCenterComponent 组件。

    3.7K50

    如何在ASP.NET Core中使用SignalR构建与Angular通信的实时通信应用程序

    第一种方法是在定义的时间间隔(轮询)定期调用API 以更新仪表板上的数据。 无论如何,还是有一个问题:如果没有更新的数据,我们会因请求而不必要地增加网络流量。...一种替代方法是长轮询技术:如果服务器没有可用数据,则它可以使请求保持活动状态,直到发生某种情况或达到预设的超时时间为止,而不是发送空响应。如果存在新数据,则完整的响应将到达客户端。...完全不同的方法是反转角色:当有新数据可用(推送)时,后端与客户端联系。...作为参数发送的对象将使用适当的协议反序列化。客户端在页面代码中搜索与名称相对应的方法,如果找到该名称,则将其调用并传递反序列化的数据作为参数。...在我们的示例中,我们正在将消息发送到所有连接的客户端。但是,SignalR提供了向单个用户或用户组发送消息的机会。

    2.1K20

    Angular 6.x 快速入门

    $ ng new project-name 启动本地服务器 $ cd project-name $ ng serve 第二节 - 插值表达式 在 Angular 中,我们可以使用插值语法实现数据绑定。...基础知识 定义组件的元信息 在 Angular 中,我们可以使用 Component 装饰器来定义组件的元信息: @Component({ selector: 'my-app', // 用于定义组件在...name = 'Angular'; } 定义数据接口 在 TypeScript 中的接口是一个非常灵活的概念,除了可用于对类的一部分行为进行抽象外,也可用于对「对象的形状(Shape)」进行描述...当我们点击以上的任意链接时,页面不会被重新加载。...router-outlet 指令 该指令用于告诉 Angular 在哪里加载组件,当 Angular 路由匹配到响应路径,并成功找到需要加载的组件时,它将动态创建对应的组件,并将其作为兄弟元素,插入到

    14.1K20
    领券