- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我一直在寻找一种方法,使标准的 a[href] 链接在动态加载到 [innerHTML] 时可以像 routerLinks 一样工作。它似乎不是标准的东西,我找不到任何能满足我需要的东西。
我有一个可行的解决方案,但想知道是否有人知道执行此操作的任何更好的方法或我这样做可能会遇到的任何潜在问题。
我在我的 app-routing.module.ts 中使用 jQuery,所以我声明了变量:
declare var $:any;
然后我找到所有具有 href 属性但不具有 routerlink 属性的 anchor 。然后我可以获取路径名并告诉路由器在单击时导航到它。
$(document).on('click', `a[href]:not("a[routerlink]"):not("a[href^='mailto:']"):not("a[href^='tel:']")`, function(e){
if(location.hostname === this.hostname || !this.hostname.length){
e.preventDefault();
router.navigate([this.pathname]);
}
});
这似乎可以完成这项工作,但我认为必须有一种更“有 Angular ”的方式来做到这一点......
最佳答案
这可能不是最好的方法,但您可以使用 Renderer
和 ElementRef
将事件监听器添加到 anchor 标记,如 this article 中所述。
@Component({
selector: 'app-example-html',
templateUrl: './example.component.html',
styleUrls: ['./example.component.less'],
})
export class ExampleComponent implements AfterContentInit {
private clickListeners: Array<(evt: MouseEvent) => void> = [];
constructor(
private router: Router,
private el: ElementRef,
private renderer: Renderer2,
) { }
ngAfterViewInit() {
const anchorNodes: NodeList = this.el.nativeElement.querySelectorAll('a[href]:not(.LinkRef)'); // or a.LinkPage
const anchors: Node[] = Array.from(anchorNodes);
for (const anchor of anchors) {
// Prevent losing the state and reloading the app by overriding the click event
const listener = this.renderer.listen(anchor, 'click', (evt: MouseEvent) => this.onLinkClicked(evt));
this.clickListeners.push(listener);
}
}
private onLinkClicked(evt: MouseEvent) {
evt.preventDefault();
if (evt.srcElement) {
const href = evt.srcElement.getAttribute('href');
if (href) {
this.router.navigateByUrl(href);
}
}
}
}
关于[innerHTML] 中的 Angular routerLink,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45738371/
In the Angular documentation , routerLink指令选择器定义为: :not(a)[routerLink] 据我所知,这意味着“所有具有routerLink属性的非标
[routerLink] 和 routerLink 有什么区别?你应该如何使用它们? 最佳答案 您会在所有指令中看到这一点: 当您使用括号时,这意味着您正在传递一个可绑定(bind)属性(一个变量)。
我真的很困惑我是否应该使用 About 或 About 最佳答案 两者都是正确的。 About 和 About 将路径作为字符串传递 同时 About 传递一组路由器命令。 两者都受支持。 https
我想从一个 html 页面使用 routerLink 和 state 路由到另一个页面。使用标签没有问题,在登录页面中的 ngOnInit 期间,我可以按预期检索状态。使用标签主页也是导航,但状态结果
我试图在我的 routerLink 中传递一个 id,我怎么能连接它? doesnt work. 你有解决方案吗? 提前致谢 最佳答案 你去吧。 Link 关于 Angular 变量到 rou
所以我有一个包含 2 个独立部分的应用程序,需要单独导航,我认为 Aux Routing 是可行的方法。 这是我的路线: export const ROUTES: Routes = [ { pat
我有一个routerLink在我的页面上,转到某个路线,但我收到此错误 基本上,我有一个具有唯一 id 的 Assets 页面,然后当您单击按钮时,id 会发生变化,并且路线应该更新,因此 asset
我对此组件的 html 调用 这是一个动态组件,然后在 onBtnActionClicked($event) 中需要像这样重定向 {{detail.detailId}} 但是正如你所
我的主 app.html 文件中有一个简单的应用程序,其结构如下。 在我的导航列表组件中,我可以轻松创建 routerLinks,如下所示: link 但是,当我进入路由器导出内呈
我正在尝试将 routerLink 与以下函数一起使用: Home callHome(data){ //perform some operations this.router.navig
我在教程中看到他们对 routerLink 属性使用了两种类型的语法。 我找不到任何说明它们之间差异的文档。 最佳答案 这是关于 Angular 非常重要的了解!当您在属性周围使用 [] 时,这意
... path: ':category/:page', ... {{category.attributes.name}} 浏览器中routerLink的第一个参数是NaN。我该如何修复它?
我正在尝试创建一个具有登录功能的 Angular 应用程序。 我用过ng cli生成空白应用程序。它带有 AppComponent 。 然后我创建了一个 LoginComponent和一个 HomeC
我有 2 一切都很好,这是我的RouteConfig在配置文件组件内: @Component({ selector : "profile", templateUrl: '/client
在这个演示应用程序中,我在延迟加载的书籍模块中有以下路由: { path: 'collection', component: CollectionPageComponent }, 并在搜索组件中使用以
我已经使用路由器链接在我的网络应用程序中添加了页面导航,出于某种原因,该页面大部分时间只是重新加载,而在其他时候它工作正常,非常随机。 我很困惑,尤其是为什么它会随机工作。任何见解都会有所帮助。 相关
我从 Vue.js 中的 VueRouter 开始,我遇到了这个错误: [Vue warn]: $attrs is readonly. found in ---> at resources\
我只想在一条路线上删除一个类(class),(或者在所有但只有一条路线上添加一个类(class)。)这怎么可能?我已经尝试使用多个参数的 [routerLink] 无济于事:
我正在制作一个电子商务网站,我的目标是每个对象有多个输入点,例如,他们单击/点击卡片上除按钮以外的任何地方,它将在单击/时转到产品详细信息/点击按钮会将该项目添加到购物车。 目前我转发到详情没有问题,
我想要一种更好的方式来编写这些代码行。 1" class="page-item"> First 1)" class="page-item disabled"> First
我是一名优秀的程序员,十分优秀!