angular-routing 相关问题

ngRoute模块为AngularJS应用程序提供路由和深层链接服务和指令。

Angular 中的页面重新加载或路由问题[已关闭]

我正在用 Angular 构建我的个人网站并将其托管在 GitHub 页面上。当页面重新加载时,我遇到一个问题,并且显示 404 错误。对于主页,它工作正常,但是......

回答 1 投票 0

Angular 7 在 url 中传递参数,将数据作为 url 中的参数从后端发送到 Angular 前端

我使用 Angular 7 作为前端,django 作为后端,我将 url 中的购物车 id 作为参数传递(例如:http://localhost:4200/cartModule/cartId)。 早些时候我将 id 作为 q 发送...

回答 0 投票 0

导航在 Angular 10 中无法启动

我是 Angular 新手,请参阅以下问题,但我的情况没有任何解决方案。 NullInjectorError:没有 MatDialogRef 的提供者 NullInjectorError:没有 MatDialogRef 的提供者!安...

回答 3 投票 0

如何根据当时找到我的 routerLink 向容器添加样式 [关闭]

我的菜单: 我的菜单: <header class="box-one" > <nav> <ul class="menu-horizontal"> <li><a routerLinkActive="active" routerLink="/inicio">Inicio</a></li> <li><a routerLinkActive="active" routerLink="plataforma">Plataformas</a></li> <li><a routerLinkActive="active" routerLink="sobreNosotros">Sobre Nosotros</a></li> <li><a routerLinkActive="active" routerLink="contacto">Contacto</a></li> </ul> </nav> </header> 我有这个函数可以调暗(透明)并返回标题的背景颜色 funScroll() { var header = document.querySelector(".box-one") window.addEventListener("scroll", function () { header!.classList.toggle("arriba", window.scrollY < 800);//arriba hace transparente header!.classList.toggle("abajo", window.scrollY > 500);//abajo=oscurece }) } 但我只希望主页在听众中执行此操作,而其他页面则变暗。 使用这个无效的代码。 private router = inject(Router) constructor() { this.router.events.subscribe(event => { if (event instanceof NavigationEnd) { console.log(event.url); // ruta actual this.currentRoute = event.url; if (event.url === "/inicio") { this.funScroll() } else { } if (event.url === "/plataforma") { var header = document.querySelector(".box-one"); header!.classList.add('abajo'); } } }); } 关于这个代码我已经放弃了。

回答 0 投票 0

拒绝从 'http://localhost:4200/contacts/styles.js' 执行脚本,因为它的 MIME 类型('text/html')不可执行,并且严格的 MIME[...]

我正在开发一个测试应用程序来学习在线课程。 现在我想使用路由参数,所以我的代码是这样的: 在 app.routing.module.ts 中: const appRoutes: 路线 = [ { 路径:'',组件...

回答 0 投票 0

Angular 从根定义路由参数

我想从基本 url 创建一个路由路径: 我的域名.com/3 它不适用于路径:':id',页面将被卡住: 导出常量路由:路由 [] = [ { 小路: '', 成分:

回答 1 投票 0

在 Angular 15 中使用 CanActivate 和 BreakpointObserver

Angular 15 建议使用任何 JavaScript 函数作为 CanActivate 守卫。我想在此方法中使用 BreakpointObserver。我有一个 BreakpointService,它将 BreakpointObserver 作为

回答 1 投票 0

问题:带有 Angular Parcel 的单个 Spa,在 Parcel 内进行动态路由

描述错误或问题 我正在使用 Single Spa 创建一个微前端。 包裹是有角度的。 该包裹包含 2 个组件:支付组件和成功组件。 我的问题...

回答 0 投票 0

角度路由 - 导航时的前缀路由

我正在使用 Angular 的模块联合。 在我的远程应用程序中,我想在不修改路由文件的情况下为路由添加前缀。 我试图在全球范围内设置它,但它不起作用: 应用程序...

回答 0 投票 0

How to route to auxiliary route programmatically with param

我有一个从子组件接收事件的组件,如下所示: 在我的功能路线中,我想...

回答 0 投票 0

如何在不注入的情况下获取 Angular 路由器的实例?

通常我会在我的组件中这样做。 从“@angular/router”导入{路由器}; @成分({ ... }) 导出类 CompyTheComponent { 构造函数(私有路由器:路由器){ console.log(r...

回答 2 投票 0

当我在 Angular 中调用一个组件时,它没有出现,即使端点发生变化,home 组件仍然出现

我创建了一个“学生”组件,当我调用它时,它没有出现在它应该位于的端点中!相反,家庭组件仍然出现在学生端……

回答 0 投票 0

如何允许同一组件的多个选项卡同时保持其状态?

我的应用程序使用由服务管理的延迟加载选项卡系统。 当用户在导航菜单上选择一个选项时,会发生两件事: 在选项卡服务中,一个条目被添加到选项卡数组中....

回答 2 投票 0

如何在 Angular 2 中跟踪路由?

我的组件带有单独的路由设置文件: 从'@angular/core'导入{NgModule}; 从 '@angular/router' 导入 { Routes, RouterModule }; 从 '../core/route.se 导入 { Route } ...

回答 5 投票 0

访问功能模块路由来自应用程序模块的配置数据

有什么方法可以从应用程序的路由配置访问功能模块路由配置。成分 我有一个延迟加载的功能模块。我想访问功能模块路由数据...

回答 2 投票 0

如何在 Angular Guard 中使用/返回承诺?

我正在尝试在 Angular 中实现一个 Guard,它将检查用户是否经过身份验证并相应地重定向他但是当我实现它时,我得到这个错误错误:未捕获(承诺):

回答 0 投票 0

如何将 Angular 服务中的数据同时加载到两个组件中?

我有一个角度组件,它使用服务从数据库加载客户端。我不再为每个组件返回数据库,而是将这些数据缓存在服务中作为 Sel...

回答 1 投票 0

如何实现产品类别的角度路由?

我正在用 firebase 创建一个有角度的网上商店。我不想为每个类别创建不同的组件。示例路由:/products/tables 它应该列出所有表。第二个例子:/pro...

回答 2 投票 0

如何根据路由显示组件组件的一部分

我试图在某些路由中显示我的标题组件的一部分。这是我的标题组件: 我试图在某些路由中显示我的标题组件的一部分。这是我的标题组件: <div id="cabecalho" class="p-2"> <div class="row"> <div class="col mt-2"> <div *ngIf="this.unidadeAtendimento == 8"> <img src="../../../assets/imagens/logo-stl-removebg-preview.png" alt="logo-stl" class="logo-stl mt-1"/> </div> </div> <!-- here starts the part that I want to show just in some routes --> <div class="col text-center mt-2"> <a [routerLink]="['/lista-contas']" [queryParams]="{ unidadeAtendimento: unidadeAtendimento }"> <i class="bi bi-receipt"></i> <p> Contas </p> </a> </div> <div class="col text-center mt-2"> <a [routerLink]="['/cti/home']" [queryParams]="{ unidadeAtendimento: unidadeAtendimento}"> <i class="bi bi-hospital"></i> <p> Internação </p> </a> </div> <div class="col text-center mt-2"> <a [routerLink]="['/tela-upload']" [queryParams]="{ unidadeAtendimento: unidadeAtendimento}"> <i class="bi bi-upload"></i> <p> Upload </p> </a> </div> <!-- here it ends --> <div class="col text-end" *ngIf="this.unidadeAtendimento != null"> <button class="btn btn-danger mt-3 me-5" (click)="logout()">Sair</button> </div> 这是我的路由组件: const routes: Routes = [ { path:'cti/home', component:HomeComponent, }, { path:'tela-de-escolha', component:TelaDeEscohaComponent, }, { path:'lista-contas', component:ListaContaComponent, }, { path:'tela-upload', component:TelaUploadComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule {} 我不想只在“tela-de-escolha”路线中显示组件的一部分。有人知道我该怎么做吗? 您可以将 *ngIf 指令与注入的 Router 服务结合使用。 在构造函数中注入 Router 服务: constructor(readonly router: Router) {} 现在你可以将*ngIf条件添加到你只想在某些路由中显示的组件部分。检查当前 URL 是否不等于路由 'tela-de-escolha': <div *ngIf="router.url !== '/tela-de-escolha'"> ... </div> 这将确保部分组件只会显示在“tela-de-escolha”以外的路线上。 连同前面的答案(@SparrowVic),您还可以考虑创建一个新组件,其中包含您要根据条件切换的视图,并在满足条件时让标题组件加载它。这将使它更具可读性和更易于维护。 此外,根据您的特定用例,如果很有可能实际上有两种类型的用户 - 一种通常只访问“tela-de-escolha”而不访问其他页面,另一种是访问其他页面并且通常无意登陆“tela-de-escolha” - 如果满足条件,您可能会考虑延迟加载上述(新)视图组件(不是路由,只是组件)。这样你的项目可能会加载得更快(同样,取决于结构和用例)。 如果你使用它,请参阅使用 ngComponentOutlet 并在标题的 ts 中使用 from() 导入。

回答 2 投票 0

如何优雅地从 ActivatedRouteSnapshot 获取完整的 url?

在我的一些 Angular 路由守卫中,我想设置“下一个”路径,以便在成功登录后重定向到。 所以,普通的守卫 canActivate 函数签名看起来像这样: 公共canActiv...

回答 4 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.