- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我构建了一个 angular 9 应用程序,并使用 @ngx-translate 添加了本地化。我已配置我的应用程序,使其采用 lang
查询参数并相应地更改语言环境。
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy {
constructor(private route: ActivatedRoute, private translateService: TranslateService) {
this.translateService.setDefaultLang('en');
this.route.queryParamMap.subscribe((params) => {
let lang = params.get('lang');
console.log('language', lang);
if (lang !== null) {
this.translateService.use(lang);
}
});
}
}
然后我在侧边栏上添加了 3 个按钮来更改查询参数(并切换语言)
<div class="p-1 text-center">
<a [routerLink]='[]' [queryParams]="{}">
<app-flag [country]="'en'" [appHoverClass]="'brightness-250'"></app-flag>
</a>
<a [routerLink]='[]' [queryParams]="{'lang':'nl'}">
<app-flag [country]="'nl'" [appHoverClass]="'brightness-250'"></app-flag>
</a>
<a [routerLink]='[]' [queryParams]="{'lang':'fr'}">
<app-flag [country]="'fr'" [appHoverClass]="'brightness-250'"></app-flag>
</a>
</div>
这工作正常。但是当按下普通的 routerLink 时,或者在 router.navigate() 调用时,查询参数再次丢失。
我不想用 [queryParamsHandling]="'preserve'"
指令装饰我的应用程序中的每个 routerLink
,因为这是一项乏味的工作并且可怕的做法。这个主题已经有一个 GitHub 问题,但是 Angular 团队几乎没有处理它(已经 4 年了):https://github.com/angular/angular/issues/12664
有没有办法(任何方式)在导航时默认保留查询参数(或只是 lang
查询参数)?
我已经在默认的 Angular 路由器之上创建了一个ExtendedRouter
import { Router, QueryParamsHandling, NavigationExtras, UrlTree } from '@angular/router';
export class ExtendedRouter {
constructor(private router: Router) {
}
private _defaultQueryParamsHandling: QueryParamsHandling = null;
public get defaultQueryParamsHandling() {
return this._defaultQueryParamsHandling;
}
public set defaultQueryParamsHandling(value: QueryParamsHandling) {
this._defaultQueryParamsHandling = value;
}
public navigate(commands: any[], extras?: NavigationExtras) {
return this.router.navigate(commands, {
queryParamsHandling: extras.queryParamsHandling ?? this.defaultQueryParamsHandling ?? '',
fragment: extras.fragment,
preserveFragment: extras.preserveFragment,
queryParams: extras.queryParams,
relativeTo: extras.relativeTo,
replaceUrl: extras.replaceUrl,
skipLocationChange: extras.skipLocationChange
});
}
public navigateByUrl(url: string | UrlTree, extras?: NavigationExtras) {
return this.router.navigateByUrl(url, {
queryParamsHandling: extras.queryParamsHandling ?? this.defaultQueryParamsHandling ?? '',
fragment: extras.fragment,
preserveFragment: extras.preserveFragment,
queryParams: extras.queryParams,
relativeTo: extras.relativeTo,
replaceUrl: extras.replaceUrl,
skipLocationChange: extras.skipLocationChange
});
}
public createUrlTree(commands: any[], extras?: NavigationExtras) {
return this.router.createUrlTree(commands, extras);
}
public serializeUrl(url: UrlTree) {
return this.router.serializeUrl(url);
}
}
但这并不涉及[routerLink]
指令。我也尝试创建一个,但我需要的所有字段都限定为 private
。
import { Directive, Renderer2, ElementRef, Attribute, Input } from '@angular/core';
import { RouterLink, Router, ActivatedRoute } from '@angular/router';
import { ExtendedRouter } from '../../helpers/extended-router';
@Directive({
selector: '[extendedRouterLink]'
})
export class ExtendedRouterLinkDirective extends RouterLink {
private router2: Router;
private route2: ActivatedRoute;
private commands2: any[] = [];
constructor(router: Router, route: ActivatedRoute, @Attribute('tabindex') tabIndex: string, renderer: Renderer2, el: ElementRef<any>, private extendedRouter: ExtendedRouter) {
super(router, route, tabIndex, renderer, el);
this.router2 = router;
this.route2 = route;
}
@Input()
set extendedRouterLink(commands: any[] | string | null | undefined) {
if (commands != null) {
this.commands2 = Array.isArray(commands) ? commands : [commands];
} else {
this.commands2 = [];
}
super.commands = commands;
}
get urlTree() {
return this.router2.createUrlTree(this.commands, {
relativeTo: this.route2,
queryParams: this.queryParams,
fragment: this.fragment,
queryParamsHandling: this.queryParamsHandling,
preserveFragment: this.attrBoolValue(this.preserveFragment),
});
}
private attrBoolValue = (s: any) => {
return s === '' || !!s;
}
}
有人知道如何解决这个问题而不必在每个 [routerLink]
上定义一个 [queryParamsHandling]
吗?
最佳答案
这种方法有一个小问题:
@Directive({
selector: 'a[routerLink]'
})
export class QueryParamsHandlingDirective extends RouterLinkWithHref {
queryParamsHandling: QueryParamsHandling = 'merge';
}
问题是它扩展了RouterLinkWithHref
, 意思是 <a routerLink="">
将附加 2 个指令(一个扩展另一个)。
和this is what happens里面RouterLinkWithHref
的 click
处理程序:
@HostListener('click')
onClick(): boolean {
const extras = {
skipLocationChange: attrBoolValue(this.skipLocationChange),
replaceUrl: attrBoolValue(this.replaceUrl),
state: this.state,
};
this.router.navigateByUrl(this.urlTree, extras);
return true;
}
更重要的是它在发送到浏览器时的外观:
RouterLinkWithHref.prototype.onClick = function (button, ctrlKey, metaKey, shiftKey) {
if (button !== 0 || ctrlKey || metaKey || shiftKey) {
return true;
}
if (typeof this.target === 'string' && this.target != '_self') {
return true;
}
var extras = {
skipLocationChange: attrBoolValue(this.skipLocationChange),
replaceUrl: attrBoolValue(this.replaceUrl),
state: this.state
};
this.router.navigateByUrl(this.urlTree, extras);
return false;
};
这意味着当您点击 <a>
标记,QueryParamsHandlingDirective.onClick
将被调用,然后 RouterLinkWithHref.onClick
.但是因为 RouterLinkWithHref.onClick
最后调用,它不会有 queryParamsHandling
设置为 merge
.
解决方案是稍微修改自定义指令,使其不继承任何东西,而只是设置一个属性:
@Directive({
selector: 'a[routerLink]'
})
export class QueryParamsHandlingDirective {
constructor (routerLink: RouterLinkWithHref) {
routerLink.queryParamsHandling = 'merge';
}
}
关于Angular:配置默认的QueryParamsHandling,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61988093/
我收到此错误消息: .rvm/gems/ruby-2.5.1/bin/ruby_executable_hooks:24:in `' 我重新安装了 Ruby rvm reinstall ruby-2.5
我开始从事 WPF Ribbon 开发,非常好! 我的问题是找到(免费)基本图标(如文件保存/打开/等,剪切/粘贴/等)。 你有什么建议吗? 最佳答案 你看过Visual Studio Icon Li
我只找到经典的声音ID,但我需要Chord(默认)日历警报。如何播放声音? ks #define systemSoundID 1315 AudioServicesPlaySystemSound (s
在 Magento 中创建货件时,有一个复选框可让您“通过电子邮件发送货件副本”。 默认情况下未选中。有谁知道我需要编辑哪个文件才能默认设置为“选中”? 最佳答案 这是一个app/design/adm
我有一个简单的 IValueConverter,它只使用 TypeConverter 进行转换。但是,在某些情况下,提供的 TypeConverter 会失败。 如果转换器未提供 Binding,我想
我正在阅读教程,默认 Activity 是一个扩展另一个类的类,它所拥有的只是一个覆盖方法。应用程序如何工作,因为它不做任何其他事情?我很困惑! 最佳答案 父类 Activity 为您处理一切。 关于
我刚刚开始研究游戏框架。我正在尝试构建 rest api,并将 postgresql 用于我的数据库连接。这是我第一次同时使用 play 和 postgre。我在 build.sbt 中建立了一个数据
是否可以创建具有以下属性的 python 对象: class Foo: def __default_method__(x): return x f = Foo() f(10) > 10
我是 jQuery 的新手,遇到了一个烦人的问题。我有一些登录字段,当该字段为空时会填充默认文本,然后在单击时删除。 我的问题是,当用户保存了他们的用户名/密码(使用浏览器)时,如果他们返回页面,登录
考虑这个代码片段: void Foo(std::string str1, std::string str2) {} template void Bar() { Foo(Types{}...);
我正在编写一个简单的 C 程序,我应该用缓冲区溢出来攻击它。所以,我不想在编译时使用任何标志。如何消除使用的默认标志? # readelf -p .GCC.command.line stack Str
考虑这个代码片段: void Foo(std::string str1, std::string str2) {} template void Bar() { Foo(Types{}...);
我有以下代码[这是一道面试题]: #include #include using namespace std; class A{ public: A(){ cout co
我想在 Autofac 中为每个匹配的生命周期范围注册创建一个实例,但偶尔需要从全局容器(没有匹配的生命周期范围)请求一个实例。在不存在匹配生命周期范围的情况下,我想给出一个顶级实例而不是抛出异常。
我正在做一个收集单词共现的修改版本,所以我编写了自己的 javascript,我正在跟踪三个对象中的出现。但是,一旦对象变大(约 800 万、300 万和 172000),每 100000 个句子需要
我正在使用 pykalman 模块中的 KalmanFilter,我想知道它如何处理缺失的观察结果。根据文档: In real world systems, it is common to have
我有一个应用了 RenderTransform 的 Canvas ,如下所示: 谁能告诉我这些值是什么意思?我似乎无法找到用于解析这些值的转换器。 最佳答案 如 RenderTransform是 T
我是 Linux 的新手,现在使用 CentOS 6。我在这里使用 MySQL 工作台,每当我尝试添加新连接时,它都会询问我默认的 key 环密码。我真的不知道,这个密码是从哪里设置的,我之前没有设置
我在 Ubuntu 18.04 上工作。我没有定义 GL_GLEXT_PROTOTYPES .我使用 glXGetProcAddress 加载“核心”OpenGL 函数.我的申请链接到 /usr/li
我按照文档中的示例添加了对使用 asio 加载 HTTPS 站点的支持,这意味着我调用 ctx.set_default_verify_paths();使用系统默认路径来查找证书。 然而,我得到:una
我是一名优秀的程序员,十分优秀!