- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
关于我的应用程序(Angular 12)的信息:
{
path: 'lista',
component: ListAComponent,
data: {
title: 'List overview',
areaCategory: AreaCategory.A,
reuseRoute: true,
},
},
{
path: 'lista/:id',
component: DetailAComponent,
data: {
title: 'Detail',
areaCategory: AreaCategory.A,
reuseRoute: false,
},
},
示例路线 模块 B
{
path: 'listb',
component: ListBComponent,
data: {
title: 'List overview',
areaCategory: AreaCategory.B,
reuseRoute: true,
},
},
{
path: 'listb/:id',
component: DetailBComponent,
data: {
title: 'Detail',
areaCategory: AreaCategory.B,
reuseRoute: false,
},
},
app.module.ts
providers: [
{
provide: RouteReuseStrategy,
useClass: CustomReuseRouteStrategy,
}
],
全局应该没问题,还是我需要将它移动到 3 个模块中的每一个?
@Injectable()
export class CustomReuseRouteStrategy implements RouteReuseStrategy {
private handlers: { [key: string]: DetachedRouteHandle } = {};
// Detect Backbutton-navigation
back = false;
constructor(location: LocationStrategy) {
location.onPopState(() => {
this.back = true;
});
}
shouldDetach(route: ActivatedRouteSnapshot): boolean {
if (!route.routeConfig || route.routeConfig.loadChildren) {
return false;
}
// Check route.data.reuse whether this route should be re used or not
let shouldReuse = false;
if (
route.routeConfig.data &&
route.routeConfig.data.reuseRoute &&
typeof route.routeConfig.data.reuseRoute === 'boolean'
) {
shouldReuse = route.routeConfig.data.reuseRoute;
}
return shouldReuse;
}
store(route: ActivatedRouteSnapshot, handler: DetachedRouteHandle): void {
if (handler) {
this.handlers[this.getUrl(route)] = handler;
}
}
shouldAttach(route: ActivatedRouteSnapshot): boolean {
if (!this.back) {
return false;
}
return !!this.handlers[this.getUrl(route)];
}
retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
if (!this.back || !route.routeConfig || route.routeConfig.loadChildren) {
return null;
}
//this.back = false; -> does not work fires to often
return this.handlers[this.getUrl(route)];
}
shouldReuseRoute(future: ActivatedRouteSnapshot, current: ActivatedRouteSnapshot): boolean {
/** We only want to reuse the route if the data of the route config contains a reuse true boolean */
let reUseUrl = false;
if (future.routeConfig && future.routeConfig.data && typeof future.routeConfig.data.reuseRoute === 'boolean') {
reUseUrl = future.routeConfig.data.reuseRoute;
}
//const defaultReuse = future.routeConfig === current.routeConfig; -> used for navigating to same component but routeConfigs are empty therefore always match?
return reUseUrl;
}
private getUrl(route: ActivatedRouteSnapshot): string {
if (route.routeConfig) {
const url = route.routeConfig.path;
return url;
}
}
clearHandles() {
for (const key in this.handlers) {
if (this.handlers[key]) {
this.destroyHandle(this.handlers[key]);
}
}
this.handlers = {};
}
private destroyHandle(handle: DetachedRouteHandle): void {
const componentRef: ComponentRef<any> = handle['componentRef'];
if (componentRef) {
componentRef.destroy();
}
}
}
我注意到
_routerState ActivatedRouteSnapshot 中包含 url,可用于区分模块,但我宁愿从路由数据中检查 areaCategory 但奇怪的是,shouldReuseRoute 方法中的 future 和当前 ActivatedRouteSnapshots 大多为空
最佳答案
这尊重你的条件
list -> detail -> list
导航 areaCategory
标签 RouteReuseStrategy
调用这将更清楚如何使用它。
transition(current, future) {
if (shouldReuseRoute(future, current)) {
// No navigation is performed, same route is recycled
return current;
} else {
if (shouldDetach(current)) {
// If not reused and shouldDetach() == true then store
store(current, getRouteHandler(current));
}
if (shouldAttach(future)) {
// If not reused and shouldAttach() == true then retrieve
return createRouteFromHandler(retrieve(future));
} else {
// If shouldAttach() == false do not recycle
return future;
}
}
}
当然,这是一个例子。
getRouteHandler
和
createRouteFromHandler
仅作为示例介绍,不区分路由组件、路由实例和路由快照。
@Injectable()
export class CustomReuseRouteStrategy implements RouteReuseStrategy {
private handlers: { [key: string]: DetachedRouteHandle } = {};
clearHandlers() {
Object.keys(this.handlers).forEach(h => {
// https://github.com/angular/angular/issues/15873
(h as any).componentRef.destroy();
})
this.handlers = {};
}
areSameArea(future: ActivatedRouteSnapshot, current: ActivatedRouteSnapshot): boolean {
return future.routeConfig.data && current.routeConfig.data
&& future.routeConfig.data.areaCategory === current.routeConfig.data.areaCategory;
}
/**
* This function decides weather the current route should be kept.
* If this function returns `true` nor attach or detach procedures are called
* (hence none of shouldDetach, shouldAttach, store, retrieve). If this function
* returns `false` an attach/detach procedure is initiated.
*/
shouldReuseRoute(future: ActivatedRouteSnapshot, current: ActivatedRouteSnapshot): boolean {
console.log('shouldReuseRoute', future, current);
if (!this.areSameArea(future, current)) {
// Changed area, clear the cache
this.clearHandlers();
}
return this.getUrl(future) === this.getUrl(current);
}
/**
* DETACH PROCEDURE: if performing a detach, this function is called, if returns
* `true` then store is called, to store the current context.
*/
shouldDetach(route: ActivatedRouteSnapshot): boolean {
console.log('shouldDetach', route);
// We always detach them (you never mentioned pages that are not recycled
// by default)
return true;
}
store(route: ActivatedRouteSnapshot, handler: DetachedRouteHandle): void {
console.log('store', route, this.getUrl(route));
if (!handler && this.getUrl(route)) return;
this.handlers[this.getUrl(route)] = handler;
}
/**
* ATTACH PROCEDURE: if performing an attach, this function is called, if returns
* `true` then retrieve is called, to store the current context.
*/
shouldAttach(route: ActivatedRouteSnapshot): boolean {
console.log('shouldAttach', route);
return !!this.handlers[this.getUrl(route)];
}
retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
console.log('retrieve', route, this.getUrl(route));
return this.getUrl(route) && this.handlers[this.getUrl(route)];
}
private getUrl(route: ActivatedRouteSnapshot): string {
// todo : not sure this behaves properly in case of parametric routes
return route.routeConfig && route.routeConfig.path;
}
}
关于Angular RouteReuseStrategy 后退按钮/交叉模块,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68902912/
我想使用单个(交叉)编译器来编译不同 ARM 调用约定的代码:因为我总是想使用浮点和 NEON 指令,所以我只想选择硬浮点调用约定或软浮点(softfp)调用约定。 我的编译器默认为硬浮点,但它支持我
假设我正在构建一个依赖于两个库的 java 应用程序:A 和 B。A 和 B 都依赖于库 C。管理 A 和 B 使用相同版本的最佳方法是什么所以他们不冲突?我正在使用 Gradle。 最佳答案 从 G
我想在按钮的文本上添加图像。如果我将图像添加为按钮的背景,它就会添加到文本下方。预期结果作为图像添加。请帮忙 更新:我需要以编程方式执行此操作。 最佳答案 在 XML 中, * 在代码中
我已经开始使用 CSS3 制作动画了。 我尝试创建一个动画汉堡菜单,但结果有点难看。顶部和底部的条向右平移一点。所以旋转动画不是很流畅和正确。 这是结果 => 这是我的代码: /* HTML */
给定一个具有2条相交曲线的图像,如下图所示,我如何使用opencv或python检测和区分2条曲线? (所以我需要2条单独的曲线) 最佳答案 您可以扫描每一列,并从连接的零件中识别出簇。 伪算法: l
我正在尝试在 redhat 集群(x86_64 主机)上设置 cross-mingw。我没有 root 访问权限,并且可用的 mingw 二进制文件不起作用(坏 glibc 版本等)。我正在阅读本教程
我正在尝试在javaFX中开发一个游戏,当两个图像相交时,分数将被更新,并且障碍物将不可见。但不幸的是,在游戏中分数不断更新。 我想我无法在游戏中正确地使图像不可见。 以下是相关类的完整代码: pac
pikastar dot com 是网站,当向下滚动它然后在导航菜单展开固定位置时它 > 将穿过主 div。我该如何修复它。 #topNav.sticky { box-shadow: 0 10
我正在使用 Eclipse为 ARM 处理器交叉编译 g++ 项目。我在 Windows 环境中使用 yagarto 工具链。我对 C 项目没有问题,但是对于 C++,我一直收到错误: libc.a(
我想从两个哈希数组中获取并集/交集/差集,例如: array1 = [{:name =>'Guy1', :age => 45},{:name =>'Guy2', :age => 45}] array2
有没有办法在调用任何 Controller 操作之前执行一些代码? 我需要根据 get 参数的值设置 session 变量,而不考虑调用哪个 Controller 。 当然,一旦这个处理完成,请求需要
我刚开始使用 3D 网格,面向用于有限元分析。我想在立方体状矩阵中模拟 Material 的夹杂物(任何形状,但主要对球体和椭圆体感兴趣)。这些夹杂物不应彼此重合。 所以我想为python使用某种包,
我想知道以跨平台方式操作应用程序设置的最佳解决方案是什么。 在 iOS 中,我们可以在设置屏幕中更改应用程序外部的设置,但在 windows phone 和 android 中我们没有。 所以,我的想
var barcodeNum = ko.observable(""); VelocityMeetings.scan = function (params) { var errorMessage = k
这个问题在这里已经有了答案: Transforming data.frame in R (2 个答案) 关闭10 年前。 过去我问过一个关于如何create cross tables from a
我有两个共享同一个工厂的 Controller 。其中一个 Controller 正在更新工厂变量。其他人应该注意该变化并稍后显示。 我是这样尝试的: http://plnkr.co/edit/q1N
标题不好,但这是我发现的将我的问题与简单的表格交叉区分开来的方式,因为我之前的研究总是让我接触到这类主题。 我有几个表 - 为了简化起见,我们只用 3 个表来命名它们:A、B、C。我想将它们全部放在一
我需要做这样的事情(在 MySQL 中),我使用 UNION 的尝试直到现在才奏效。 理论上: SELECT * FROM tableA A JOIN tableB B ON A.tableAId =
注意:使用SDL 2.0,Cross header class问题 我在类之间进行交叉引用,主要是我的类初始化渲染器和我的纹理类引用渲染初始化。现在,我已经能够运行该程序,直到我开始放入纹理类,代码也
我有一个这样的字母数组 var letters = ["Y", "X", "A", "Y", "O", "H", "A", "O", "O"]; 我创建了一个循环来
我是一名优秀的程序员,十分优秀!