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

如何将Angular2路由器连接到ngrx/store?

将Angular2路由器连接到ngrx/store的过程如下:

  1. 首先,确保你已经安装了ngrx/store和@ngrx/router-store这两个依赖包。
  2. 在你的应用程序的根模块中,导入StoreModule和StoreRouterConnectingModule,并将它们添加到imports数组中。这样可以将ngrx/store和ngrx/router-store集成到你的应用程序中。
代码语言:typescript
复制
import { StoreModule } from '@ngrx/store';
import { StoreRouterConnectingModule } from '@ngrx/router-store';

@NgModule({
  imports: [
    StoreModule.forRoot({}),
    StoreRouterConnectingModule.forRoot()
  ],
  ...
})
export class AppModule { }
  1. 在你的应用程序的根组件中,导入RouterStateSerializer并实现一个自定义的RouterStateSerializer类。这个类将帮助你将路由器状态转换为可存储在ngrx/store中的对象。
代码语言:typescript
复制
import { RouterStateSerializer } from '@ngrx/router-store';
import { RouterStateUrl } from './router-state-url';

export class CustomRouterStateSerializer implements RouterStateSerializer<RouterStateUrl> {
  serialize(routerState: RouterStateSnapshot): RouterStateUrl {
    let route = routerState.root;

    while (route.firstChild) {
      route = route.firstChild;
    }

    const { url, root: { queryParams } } = routerState;
    const { params } = route;

    return { url, params, queryParams };
  }
}
  1. 在你的应用程序的根模块中,将自定义的RouterStateSerializer类提供给RouterStateSerializer令牌。
代码语言:typescript
复制
import { RouterStateSerializer } from '@ngrx/router-store';
import { CustomRouterStateSerializer } from './custom-router-state-serializer';

@NgModule({
  providers: [
    { provide: RouterStateSerializer, useClass: CustomRouterStateSerializer }
  ],
  ...
})
export class AppModule { }
  1. 在你的组件中,使用ngrx/store的select函数来选择你想要的路由器状态。你可以使用createFeatureSelector函数来选择特定的状态片段。
代码语言:typescript
复制
import { Component } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { RouterReducerState, getSelectors } from '@ngrx/router-store';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <h1>Current Route:</h1>
      <pre>{{ currentRoute$ | async | json }}</pre>
    </div>
  `
})
export class AppComponent {
  currentRoute$: Observable<RouterReducerState<RouterStateUrl>>;

  constructor(private store: Store) {
    const { selectCurrentRoute } = getSelectors();
    this.currentRoute$ = store.pipe(select(selectCurrentRoute));
  }
}

以上步骤将帮助你将Angular2路由器连接到ngrx/store,并允许你在应用程序中使用ngrx/store来管理路由器状态。

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

相关·内容

Angular的12个经典问题,看看你能答对几个?(文末附带Angular测试)

Angular提供了一组生命周期hooks(特殊事件),可以被分接到生命周期中,并在需要时执行操作。构造函数会在所有生命周期事件之前执行。每个接口都有一个前缀为ng的hook方法。...在成功匹配时,它会应用重定向,此时路由器会构建ActivatedRoute对象的树,同时包含路由器的当前状态。在重定向之前,路由器将通过运行保护(CanActivate)来检查是否允许新的状态。...Route Guard只是路由器运行来检查路由授权的接口方法。...其中,反应最为迅速的就是Wijmo,Wijmo 在 Angular2 发布几个小时后就发布了支持 Angular2 正式版本的 Wijmo。...Wijmo 为每一个UI控件都提供了 Angular2 组件。所有 Angular2 组件都提供了完全声明性标记。

17.3K80

【22】进大厂必须掌握的面试题-30个Informatica面试

组1接到TGT_NULL(表达式O_FLAG =’NULL’) 组2接到TGT_NOT_NULL(表达式O_FLAG =’NNULL’) 11.如何通过映射流将备用记录加载到不同的表中?...在路由器中制作两个组。 给条件如下 ? 然后将两组发送到不同的目标。这就是整个流程。 ? 12.如何将第一条记录和最后一条记录加载到目标表中?有多少种方法可以做到?通过映射流程进行解释。...将过滤器转换连接到表达式,然后将条件写入属性,如下图所示。 ? 最后连接到目标。 ? 14.如何将唯一记录加载到一个目标表中,并将重复记录加载到另一目标表中?...从上一步将路由器接到聚合器。在路由器中,分为两组:一组称为“原始”,另一组称为“重复”。 原始写入count_rec = 1,重复写入count_rec> 1。 ?...将端口从exp_1接到target_1。 将端口从exp_2接到target_2,并将端口从exp_3接到target_3。 ? 19.我有三个相同的源结构表。但是,我想加载到单个目标表中。

6.5K40

给2019前端开发的你5个进阶建议~

庆幸的是除了 React 社区,Vue 社区有类似的 Vuex,Angular 社区有 NgRx 也提供了几乎同样的能力,甚至 NgRx 还可以无缝使用 redux-devtools 来调试状态变化。...无论如何优化,始终要遵循 Redux 三原则: 原则 方法 引发的问题 Single source of truth 组件 Stateless,数据来源于 Store 如何组织 Store?...(Fetch)场景需要处理 3 种状态,对应 LOADING/SUCCESS/ERROR 这 3 个action,我们通过 FetchTypes 类型来自动生成对应到 3 个 action 如何组织 Store...二、全面拥抱 TypeScript TypeScript 目前可谓大红大紫,根据 2018 stateofjs,超过 50% 的使用率以及 90% 的满意度,甚至 Facebook 的 Jest 也正在从...再也不担心后端悄悄改接口前端不知晓 再也不需要前后端接口约定文档,使用代码保证前端取数和后端接口定义完全一致 另外 iron-redux 能接收到 Pont 接口响应数据格式,并推导出整个 Redux 状态树的静态类型定义,Store

99410

怎么修改路由器地址的默认IP

参考文章:http://jingyan.baidu.com/article/4b52d7026e14effc5c774b30.html  一、怎么修改路由器地址的默认IP 目前绝大多数品牌有线或无线路由器采用的默认地址一般都是...192.168.1.1,但是为了安全起见或是采用级路由器连接时,则需要将默认地址192.168.1.1改为其它内网地址,如192.168.0.1。...所以考虑再三,决定采用有线+无线路由器线级方式上网。但所购买的无线路由器的默认网关地址也为192.168.1.1,作为级路由器,则需要将将192.168.1.1改为192.168.0.1。...下面笔者将同大家分享修改无线路由器地址方法,希望对您有所帮助。 注:在修改路由器地址前,需使用一根网线一端连接到电脑端,另一端连接到无线路由器任意LAN口上。 1、登录WEB管理界面。...修改完成后,如以后登陆无线路由器设置则需要使用192.168.0.1。

4.9K20

20多万台MikroTik路由器被黑,用户被迫扛起锄头挖矿

近日,安全研究人员发现了一场针对MikroTik路由器的大规模恶意劫持活动,利用Mikrotik企业路由器中的一个已知漏洞来接管路由器,向用户访问的页面注入Coinhive挖矿脚本。...初步调查显示,黑客并不是在路由器上运行恶意可执行文件,而是通过路由器功能推送包含Coinhive挖矿脚本的自定义错误页面。...如果后端本地服务器也连接到路由器,只要用户连接到了这个服务器,哪怕没有直接连接到受感染路由器,也会受到影响。...用户一路由器,脚本就开动了 从上图中可以看到,用户一接到无线网络,脚本立即执行。 由于服务器上没有mikrotik.php文件,因此该文件内容未知。...黑客添加的后台任务 一共有两个任务: 连接到另一台主机“min01.com”,并获取一个新的“error.html”文件。

1.6K30

全球超过200,000台MicroTik路由器受到僵尸网络恶意软件的控制

近期,专家表示受僵尸网络控制的MicroTik路由器是他们近年来看到的最大的网络犯罪活动之一。...有趣的是,这两个域都链接到同一个IP地址:116.202.93[.]14,导致发现了另外七个积极用于攻击的域,其中一个 (tik.anyget[.]ru) 是用于向目标主机提供 Glupteba 恶意软件样本...”,该页面显示了连接到僵尸网络的实时设备数。...该披露还与微软的一份新报告相吻合,该报告揭示了TrickBot 恶意软件如何将MikroTik路由器武器化,这增加了操作人员使用相同僵尸网络即服务的可能性。...鉴于这些攻击,建议用户使用最新的安全补丁更新他们的路由器,设置强大的路由器密码,并从公共端禁用路由器的管理界面。

63620

五步就把路由器变身为IP池

大家好,你们是否想过如何把普通的路由器变身为一个神奇的IP池?今天我就来教你如何实现!  第一步:选择路由器  首先,你需要选择一个合适的路由器来完成这个任务。...拥有一款支持OpenWRT或DD-WRT固件的路由器将会非常有帮助。这两种固件提供了丰富的功能和插件,让我们可以灵活地配置路由器作为IP池使用。  ...此外,你还可以使用代理池插件,让你的路由器动态地获取和切换代理服务器地址。  第五步:连接设备并享受IP池  现在,你已经成功将路由器变身为一个IP池!...将你的设备连接到这个路由器,并在设备的网络设置中配置代理,使用路由器提供的代理服务器进行上网。你会发现,你的设备可以轻松地变换代理服务器,让你畅游互联网、保护隐私更得心应手!  但是,风险也是存在的。...现在你已经掌握了如何将普通路由器变身为IP池的技能!是不是感觉自己变得更强大了呢?今天的分享就到这里,如果还有什么疑惑,欢迎评论区留言。

46230

计算机网络概述

从具体的构成角度 节点 主机及其上面运行的应用程序(主机节点) 路由器、交换机等网络交换设备(中专节点、交换节点) 边: 通信的链路 接入网链路: 主机连接到互联网的链路 主干链路: 路由器间的链路 Internet...(virtual circuit)的工作原理 存储- 转发 接入网、物理媒体 如何将边缘接入核心就是接入网需要做的事情 以及我们需要知道接入网的物理媒介就是媒体 如何将端系统和边缘路由器连接...wide-area 卫星 Internet/ISP 结构 ISPs (Internet Service Providers) ** 端系统通过接入ISPs (Internet Service Providers)...让我们采用渐进方法来描述当前互联网的结构 互联网络结构: 网络中的网络 问题 :给定数百万接入ISPs, 如何将他们互联到一块 问题: 给定数百万接入ISPs,如何将它们互联到一起...选项: 将每个接入ISP都连接到全局ISP(全局范围内覆盖)?

7210

N1软路由保姆级教程(一)

一般来说我们连接到光猫自己的WIFI名字就可以上网了。但是就达不到我们办的宽带的速度。比如我现在办理的是北京联通300M宽带,如果只用光猫的信号,只能跑到100-200M的速度。...所以这时候我们就会接一个路由器。 猫的IP 和路由器的 管理IP经常冲突,很多都是192.168.1.1,所以小白可以先给路由器插电,路由器的信号,然后登上路由器的连接后台,配置一下WAN口。...让WAN自动获取配置或者拨号,小白的话就自动吧,然后LAN口的配置也是让自动的就行,开启DHCP(也是默认开着的) 这样就可以光猫了, 到这里,连上路由器的信号就可以上网了,可以都选择无线WIFI,...需要有线的话把网线插到路由器的LAN口 和 电脑就行。...简单总结:路由器的WAN接光猫,LAN开启DHCP,路由器的WAN口和LAN口都弄厂商默认的就行,不用动。

2.8K40

Kubernetes的服务网格(第2部分):Pods目前看来还是很棒的

作为服务网格,链接器被设计为与应用程序代码一起运行,管理和监视服务间通信,包括执行服务发现,重,负载平衡和协议升级。 乍一看,这听起来非常适合Kubernetes的sidecar部署。...链接器如何将传出请求路由到目标链接器? 链接器如何将传入请求路由到目标应用程序? 以下是我们如何解决这三个问题的技术细节。...链接器如何将传出请求路由到目标的链接器? 在我们的服务网格部署中,传出请求不应直接发送到目标应用程序,而是发送到在该应用程序的主机上运行的链接器。...为此,我们可以利用linkerd 0.8.0引入的一个强大的新特性,称之为转换器,它可以对链接到路由的目标地址进行任意的后续处理。...例如,输出路由器的链接器配置会将所有请求像发送给目标app一样发送到与目标应用程序位于同一主机上的链接器: routers: - protocol: http label: outgoing interpreter

2.7K60

免费的公共WiFi不要乱,遭中间人攻击了吧?

第一步:拦截 第一步拦截就用到了“中间人”这个角色,攻击者在合法数据到达预期目的地之前用假网络拦截它,拦截阶段本质上是攻击者如何将自己插入为“中间人”,攻击者经常通过在不需要密码的公共场所创建一个虚假的...中间人拦截方式——ARP欺骗 如图,假如你真实的路由器ip地址为192.168.31.1,mac地址为00:4b:51:6a:5b:3a,你的电脑想要连接到网络,必须先连接到路由器,也就是网关,并且将相关数据传输到网关...此后你的电脑就一直连接的是黑客伪造的路由器,而不是你真实的路由器,这就是ARP 欺骗。...HTTPS 欺骗 HTTPS 欺骗可以让浏览器认为某个网站是安全且真实的,当用户连接到安全站点时,会向他们的浏览器发送虚假证书,从而会链接到黑客的恶意网站,一旦链接到黑客的恶意网站并且没有察觉,那么再加密的数据也跟一张白纸一样透明...所以,连接公共WiFi时一定要谨慎再谨慎,如果有必要,最好不要公共WiFi!

1.1K30

AI 通俗讲解交换机和路由器和集线器的区别

这就像集线器在接收到数据包时的行为:它会不加区分地将数据包广播给所有连接到它的设备,不管这些数据包的实际目标是谁。...交换机(Switch):现在,如果我们把这个公共会议室升级成一个有多个分隔间的大办公室,每个部门都有自己的专线可以直接连接到想要沟通的部门。...路由器(Router):接着,想象在这个办公楼中,还有一些需要与外界(其他公司)通信的需求。办公楼里有一个接待处,工作人员了解每个外来访客的目的地(即他们想要访问的部门)。...这就像路由器的功能:它不仅能处理内部流量,还能决定如何将数据包从一个网络(例如,办公楼的网络)发送到另一个网络(比如,互联网上的其他公司的网络)。...路由器相当于接待处,它不仅管理内部的信息流动,还能将信息准确地发送到外部的目的地,是连接内部网络与外部网络的关键设备。

7200

台式计算机网线,台式电脑如何连接宽带_台式电脑如何连接网线

如果你使用的是ASDL拨号的,你可以下一个宽带我世界,电信的话你… 2016-12-29 17:28:19 方法如下1、第一,先点击电脑打开台式机,选择控制面板,进入网络和intenet选项2、进入连接到网络选项...那需要买一个路由器了比如最常见的是一进四出的路由器他的的原理就是宽带线进入路由器。然后路由器设置自动接通宽带再由四个口送到四台电脑上!就可以了一个普通的路由器一百块钱不到!...2016-12-08 14:57:29 在控制面板中,找到“网络和共享”,点击进入“网络共享中心”,在页面偏下的位置有个“更改网络配置”,选择第一个“设置新的连接和网络”2进入后,在选项中选择“连接到网络...”,因为是宽带… 2017-02-04 13:16:58 具体设置步骤如下: 工具:win7电脑 步骤: 1,打开控制面板,选择【网络和Internet】。...2017-08-02 06:30:04 别的电脑用这个网可以 2017-09-21 14:22:22 用网线连接宽带猫,拨号上网,打开宽带连接,输入用户名和密码,连接即可;有无线网卡的台式机,还可以迎接无线路由器

3.4K20

xcode通过网络进行真机调试

同样,在无需发布到App Store的一些临时用APP的安装也可以用这个方式!...对手机开启网络连接方式 初次连接的时候,要使用数据线将设备连接到mac上,之后打开 Window > Devices & Simulators 可以看到连接的手机信息,其中有一项 通过网络连接 ( Connect...路由器对手机设备进行ARP绑定 ARP绑定就是路由器 对于设备MAC地址与IP地址的一个绑定功能。...当我们开启了ARP绑定之后,我们的设备连接到wifi上的时候 内网ip地址总是不变的,这样我们就不会出现过了一段时间,xcode无法通过网络连接设备的问题。...通常这一步操作,需要进入路由器的管理界面。 选择IP与MAC绑定,或是ARP绑定等类似的功能。

1.8K30

思科路由器发生故障怎么办?别慌,牢记这10条路由排障命令!

例如,PC 1和PC 2接到IP地址为10.0.0.2和10.0.0.2的路由器,要检查连通性,请从PC 1运行命令ping 10.0.0.2。...[202110181836697.png] Show Protocols 显示路由器中接口的当前状态及其IP地址,如果您只想检查路由器中所有接口的IP地址,则此命令非常有用。...[202110181836246.png] Show IP Protocols 此命令可帮助您识别路由器中配置的协议。...[202110181837363.png] Telnet Telnet是一种允许您通过TCP/IP网络(如Internet)连接到远程计算机(称为主机)的协议,Telnet命令允许您通过远程连接访问路由器并对其进行配置...它会显示您在路由器上所做的全部配置,它将显示您在路由器上运行的所有命令,包括主机名、IP地址、时钟频率和路由。

90430

台式计算机网线,台式电脑连接网线的是哪里 台式电脑怎么连接wifi步骤

笔记本wifi设置无线连接到互联台式电脑连接网上连接,转载请附上原文出处链接和本声明电脑,你买个无由器和他wifi不是一样的效果么,增强针对性,怎样设置水星wifi无由器桥接,有网络的笔记本操作如下首选右键通知栏的网络图标...89问台式机题如网页,换一换,怎么连接无线,2独显,布洛连接台式电脑乖我抱着你打针接克球打得怎连接么样,关于豆瓣,你的鼓励将是我创作的最大,整体分析,多媒体,其它,对于没有网络基础小伙伴来说,完成水连接星路由器的安装和模式的设置是由一定的难度的...常用的路由器连接wifi步骤一般都是腾达路由器,但是没网,小学生测验连接,而且百你又是用的无线网卡,平时就刷个微信和今日,1505495273台0,休台式电脑连接闲好去处,您确认删除吗?...小编整理了一下关怎么于水星迷你路由器模式设置的,这是主要的方向。wifi外形类似,值得选购,那么水星路由器口为什么获取不到地址呢?...回答2,会提示输入路由器的登录密码, 9999广告去澳大利亚旅游怎么办优签出国通过率别和台。

1.9K20
领券