- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我不确定这是否是实现它的最佳方式。如果您有其他意见,请分享。
我必须实现一个多收件箱系统,用户可以将多封电子邮件分组到不同的收件箱中。
例如:http://localhost/inbox/personal/
将显示 personal
收件箱中的电子邮件列表,http://localhost/inbox/business/3
将显示 business
收件箱中的电子邮件列表,并突出显示 ID 为:3
路线看起来像这样:
const routes: Routes = [
{
path: '',
pathMatch: 'full',
redirectTo: 'personal' // redirect to personal inbox
},
{
path: ':inbox',
component: InboxContentComponent, // list of emails in :inbox
children: [
{
path: '',
component: InboxNoSelectedEmailComponent, // no email selected
},
{
path: ':id',
component: InboxSelectedEmailComponent, // show selected email content
}
]
}
];
我的问题是 InboxContentComponent
。我需要检测收件箱何时更改以及是否选择了电子邮件
constructor(private route: ActivatedRoute) {
}
ngOnInit() {
this.route.paramMap.subscribe(inbox => {
console.log('inbox', inbox);
});
}
事件仅在收件箱更改时发出,而不是在电子邮件更改时发出。有没有办法检测子路由参数何时更改?
执行此 this.route.firstChild.paramMap.subscribe();
只有在组件初始化时路由有第一个子节点时才有效。如果路由是这样的 http://localhost/inbox/business/
那么 this.route.firstChild
是 null
我能想到的解决方案是像这样定义路由
{
path: ':inbox/:id',
component: InboxContentComponent
}
然后检查 InboxContentComponent
是否设置了 :id
有什么想法吗?
最佳答案
为了解决这类问题,我会监听路由器事件并检索我想要的内容。像这样:
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import { filter, map, mergeMap, tap } from 'rxjs/operators';
// ...
constructor(
// ...
private activatedRoute: ActivatedRoute,
private router: Router
) {
this.router.events
.pipe(
filter((event) => event instanceof NavigationEnd),
map(() => this.activatedRoute),
map((route) => {
while (route.firstChild) route = route.firstChild;
return route;
}),
mergeMap((route) => route.paramMap),
tap(
paramMap => console.log('ParamMap', paramMap)
)
).subscribe(
(paramAsMap) => // Get the params (paramAsMap.params) and use them to highlight or everything that meet your need
)
}
您可以根据自己的需要进行调整。参数?突出显示:无突出显示。
关于angular - ActivatedRoute 订阅第一个子参数观察者,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48977775/
我正在尝试使用 ActivatedRoute 从父组件获取子路由数据('layout') .我已经尝试了以下示例,并且能够获得我正在寻找的数据,但只能获得一次。在子路由更改期间,我没有看到更新的“布局
我不确定这是否是实现它的最佳方式。如果您有其他意见,请分享。 我必须实现一个多收件箱系统,用户可以将多封电子邮件分组到不同的收件箱中。 例如:http://localhost/inbox/person
我不确定这是否是实现它的最佳方式。如果您有其他意见,请分享。 我必须实现一个多收件箱系统,用户可以将多封电子邮件分组到不同的收件箱中。 例如:http://localhost/inbox/person
我是 Angular 的新手。我试图提高我的代码覆盖率,但我似乎无法通过 this.route.snapshot.paramMap 取回“用户名”的值。这是我的课。当我运行测试时,我收到的消息是 A
我试图在屏幕上显示激活路由参数的值但失败了 在我的第一个组件中 {{i+1}} {{cate.category}} onviewChecklists(category
我想在另一个服务中使用 ActivatedRoute 服务。但是,在我的服务中,ActivatedRoute 服务正在监视主要的 App 组件,并且没有从可观察对象发出任何路由参数更改。如果我改为从同
服务中的 ActivatedRoute 问题 我试图在服务中使用 ActivatedRoute 并注意到它似乎没有跟踪我当前所在的路线。事实上,它似乎不会选择任何路线。我花了很长时间才弄清楚发生了什么
我正在学习 Angular,我想做测试,但我被卡住了。我有一个函数: ngOnInit(): void { this.route.paramMap .switchMap((params
我有一条路线注册了一些数据: const routes: Routes = [ {path: 'my-route', data: { title: 'MyTitle' }, component
我的代码: ngOnInit() { this.activatedRoute.params.subscribe((params: Params) => { // do stuff })
我正在使用以下代码模拟 ActivatedRoute 的参数值: providers: [ { provide: ActivatedRoute, useValue:
我想为我的组件创建测试。我有在 ng init 中解析数据和读取数据的路由器解析器。我想为此创建测试。我如何为这段代码创建测试 @Component({ selector: 'jhi-
我正在尝试使用 Angular 2.0 捕获查询字符串参数,但遇到了困难。我有一个这样的网址 http://localhost:5000/?id_token=eyJ0eXAiO .... 而且我希望能
我正在使用 Angular2 Material Toolbar我想将当前页面标题传递给它。 我的 app.component 有一个头部组件和当前页面组件: @Component({ select
我想得到来自这个的 url: this.router.navigate(./somepath, { relativeTo: this.route }) this.route 是 ActivatedRo
我正在使用最新的 Angular 5,并且遇到以下异常 ERROR Error: StaticInjectorError(AppModule)[AppComponent -> ActivatedRou
我正在尝试使用 Karma/Jasmine 中的 ActivatedRoute 类测试 Angular 组件,但我遇到了一个非常烦人的错误,我无法修复。 错误:无法解析 ActivatedRoute
我正在尝试使用 observables 从我激活的路由中获取参数 :id。当我在控制台上打印 params 时,我得到了 :id 的正确值。但是this.id不是这样的。我得到了 NaN 的值。你能告
问题是当我在两个相似的 URL 之间导航时,我的组件没有重绘。例如,当用户查看 http://localhost:8088/#/app/route/study/6/detail 时然后导航到 http
在我的组件的 ngOnInit 方法中,以下行产生错误。 this.products$ = this.route.paramMap.switchMap((params: ParamMap) =>
我是一名优秀的程序员,十分优秀!