- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试使用 ActivatedRoute
从父组件获取子路由数据('layout') .我已经尝试了以下示例,并且能够获得我正在寻找的数据,但只能获得一次。在子路由更改期间,我没有看到更新的“布局”值。
路线
const routes: Routes = [
{
path: '',
component: Layout1Component,
children: [
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
{
path: 'home',
loadChildren: './pages/analytics/analytics.module#AnalyticsModule',
data: {
layout: 'boxed'
}
},
{
path: 'files',
loadChildren: './pages/files/files.module#FilesModule',
data: {
layout: 'full'
}
}
]
}
];
export class Layout1Component implements OnInit {
constructor(private service: AppService, route: ActivatedRoute) {
this.layout = route.snapshot.firstChild.data['layout'];
route.url.subscribe(() => {
console.log(route.snapshot.firstChild.data['layout']);
});
}
}
最佳答案
根据我的理解,您只获取一次数据的原因是因为 ActivatedRoute
获取 url
作为 行为主题 当它被实例化时。
function createActivatedRoute(c: ActivatedRouteSnapshot) {
return new ActivatedRoute(
new BehaviorSubject(c.url), new BehaviorSubject(c.params), new BehaviorSubject(c.queryParams),
new BehaviorSubject(c.fragment), new BehaviorSubject(c.data), c.outlet, c.component, c);
}
const routes: Route[] = [
{
path: '',
component: HelloComponent,
children: [
{
path: 'foo',
loadChildren: () => import('path/to/foo').then(m => m.FooModule),
data: {
name: 'andrei'
}
},
{
path: 'bar',
loadChildren: () => import('path/to/bar').then(m => m.BarModule),
data: {
name: 'john'
}
},
]
},
]
constructor (private router: Router, private route: ActivatedRoute) { }
ngOnInit () {
const routeEndEvent$ = this.router.events
.pipe(
filter(e => e instanceof NavigationEnd),
tap(() => console.warn("END")),
);
this.router.events
.pipe(
filter(e => e instanceof ChildActivationEnd && e.snapshot.component === this.route.component),
buffer(routeEndEvent$),
map(([ev]) => (ev as ChildActivationEnd).snapshot.firstChild.data),
takeUntil(this.ngUnsubscribe$)
)
.subscribe(childRoute => {
console.log('childRoute', childRoute);
})
}
routeEndEvent$
是一个 observable,只有在路由准备好时才会发出 ( NavigationEnd
) filter(e => e instanceof ChildActivationEnd && e.snapshot.component === this.route.component)
:在检查了路由器发出的事件一段时间后,我达到了这个解决方案,以确定组件( HelloComponent
)是否是更改的路由( this.route.component
)的父级( e.snapshot.component
)。 buffer(routeEndEvent$)
:我们只想在路由器达到其最终状态( NavigationEnd
)时采取行动。 here您可以阅读有关 buffer
的更多信息运算符(operator) 关于angular - ActivatedRoute 不会在路线更改时更新子路线数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58681856/
我正在尝试使用 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) =>
我是一名优秀的程序员,十分优秀!