angular-routing 相关问题

如何在 Angular 中一致地获取延迟加载模块的根路由？

我有一个延迟加载模块，我想始终触发相对于模块根的导航。 但我找不到一种方法来一致地找到模块的根路径。也就是说，如果我的惰性加载

离子角度侧面菜单

我的侧菜单内容一直存在问题，每当插入 contentId="main-content" 时，导航链接的内容（主页）都不会加载/可见。但是当我删除它时，

Angular 故事书错误：无法匹配任何路线。 URL 段：'iframe.html'

我正在尝试配置故事书项目并收到奇怪的错误。 错误：未捕获（承诺）：错误：无法匹配任何路由。 URL 段：'iframe.html' 错误：无法匹配任何路由。 URL 段...

如何有条件地在锚点上使用 [href] 或 [routerLink]？

我需要将相同的锚链接有条件地指向本地或外部资源。我试过 测试 我需要将相同的锚链接有条件地指向本地或外部资源。我试过了 <a [href]="outside?externalUrl:null" [routerLink]="outside?[]:['/route',id]" >test</a> 但这不起作用。我没有收到任何错误，但它指向同一本地页面并忽略外部 URL。有什么想法吗？ 另一种选择是构建链接，但我找不到任何文档如何访问服务内的routerLink 编辑：我知道我可以使用 *ngIf 克隆整个链接，但我不想这样做，我的链接包含一个带有很多选项的视频标签 最简单的方法是使用 *ngIf / else: <ng-container *ngIf="outside; else internalBlock"> <a [href]="externalUrl">External</a> </ng-container> <ng-template #internalBlock> <a [routerLink]="['/route', id]">Internal</a> </ng-template> 编辑#1：（丑陋的解决方法） 既然你不想用*ngIf（我还是不明白为什么），你可以这样做： 模板： <a href="javascript:void(0)" (click)="handleClick(outside, '/route', id, externalUrl)">Link</a> 组件： handleClick(outside: boolean, internalUrl: string, internalId: string, externalUrl: string): void { if (outside) { window.location.href = externalUrl; // You can also use Location class of Angular } else { this.router.navigate([`${internalUrl}/${internalId}`]); } } 对于条件 href，在 attr 前面添加。在 href 对我有用之前，使用 null 作为值，如下所示： [attr.href]="!item.subMenu ? item.url : null" 您可以通过在指令中注入 RouterLinkWithHref 来访问 routerLink 实例。 指令： import { ElementRef, Optional, Input, Directive, OnChanges } from '@angular/core'; import { RouterLinkWithHref } from '@angular/router'; @Directive({ selector: '[externalLink]' }) export class ExternalLinkDirective implements OnChanges { @Input() externalLink: string; constructor( private el: ElementRef, @Optional() private link: RouterLinkWithHref ) {} ngOnChanges(){ if (!this.link || !this.externalLink) { return; } this.el.nativeElement.href=this.link.href=this.externalLink; // Replace onClick this.link.onClick = (...args: any[]) => { return true; } } } 用途： <!-- Ignore router link and use external link --> <a routerLink="/some/path" externalLink="https://google.com">Link</a> 对于我的用例，<a>标签内的内容有一些嵌套的html，所以我必须为此创建一个自定义组件。 该组件的作用基本上是 使用内容嵌入 结合上下文使用ngTemplateOutlet 有条件地显示带有 <a> 指令或 routerLink 的 href 标签。 route-or-redirect.component.ts import { Component, ContentChild, Directive, Input, OnInit, TemplateRef, } from '@angular/core'; import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'; export interface Bookmark { id: string; title: string; imgUrl: string; } @Directive({ selector: '[appLinkContent]', }) export class RouteOrRedirectLinkContentDirective {} @Component({ selector: 'app-router-or-redirect', templateUrl: './router-or-redirect.component.html', styleUrls: ['./router-or-redirect.component.scss'], }) export class RouteOrRedirectComponent implements OnInit { @Input() route = '/'; @Input() set externalLink(link: string) { this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(link); } @Input() redirect = false; @Input() bookmark!: Bookmark; @ContentChild(RouteOrRedirectLinkContentDirective, { read: TemplateRef }) linkContent: TemplateRef<RouteOrRedirectLinkContentDirective> | undefined; safeUrl: SafeResourceUrl | undefined; constructor(private sanitizer: DomSanitizer) {} ngOnInit(): void {} } route-or-redirect.component.html <a [routerLink]="route" *ngIf="!redirect; else redirectLink"> <ng-container *ngTemplateOutlet="linkContent; context: { $implicit: bookmark }" ></ng-container> </a> <ng-template #redirectLink> <a [attr.href]="safeUrl"> <ng-container *ngTemplateOutlet="linkContent; context: { $implicit: bookmark }" ></ng-container> </a> </ng-template> route-or-redirect.component.ts import { Component, OnInit, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { RouterLinkWithHref, RouterModule } from '@angular/router'; import { RouterTestingModule } from '@angular/router/testing'; import { Bookmark, RouteOrRedirectComponent, RouteOrRedirectLinkContentDirective, } from './router-or-redirect.component'; @Component({ selector: 'app-test', template: ` <app-router-or-redirect class="default-no-content"></app-router-or-redirect> <app-router-or-redirect class="default-with-content"> <div *appLinkContent>test link</div> </app-router-or-redirect> <app-router-or-redirect class="use-route" route="/test" externalLink="localhost:4200" > <div *appLinkContent>test link</div> </app-router-or-redirect> <app-router-or-redirect class="use-redirect" route="/test" externalLink="localhost:4200" [redirect]="true" > <div *appLinkContent>test link</div> </app-router-or-redirect> <app-router-or-redirect class="link-with-context" route="/test" externalLink="localhost:4200" [redirect]="true" [bookmark]="bookmark" > <div *appLinkContent="let bookmark"> <img [attr.src]="bookmark.imgUrl" /> <h3>{{ bookmark.title }}</h3> </div> </app-router-or-redirect> `, styles: [], }) export class TestRouterOrRedirectComponent implements OnInit { bookmark: Bookmark = { id: '1', title: 'Test Link', imgUrl: 'https://placeimg.com/640/480/any', }; constructor() {} ngOnInit(): void {} } describe('RouterOrRedirectComponent', () => { let component: TestRouterOrRedirectComponent; let fixture: ComponentFixture<TestRouterOrRedirectComponent>; let defaultWithNoContent: RouteOrRedirectComponent; let defaultWithContent: RouteOrRedirectComponent; let useRoute: RouteOrRedirectComponent; let useRedirect: RouteOrRedirectComponent; beforeEach(async(() => { TestBed.configureTestingModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [RouterModule, RouterTestingModule], declarations: [ TestRouterOrRedirectComponent, RouteOrRedirectComponent, RouteOrRedirectLinkContentDirective, ], }).compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(TestRouterOrRedirectComponent); component = fixture.componentInstance; defaultWithNoContent = fixture.debugElement.children[0].componentInstance; defaultWithContent = fixture.debugElement.children[1].componentInstance; useRoute = fixture.debugElement.children[2].componentInstance; useRedirect = fixture.debugElement.children[3].componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); it('should default to link with route point to /', () => { const link = fixture.debugElement .query(By.css('.default-no-content')) .query(By.directive(RouterLinkWithHref)); expect(link).toBeTruthy(); expect(link.attributes.href).toBe('/'); }); it('should default to link with content and route points to /', () => { const link = fixture.debugElement .query(By.css('.default-with-content')) .query(By.directive(RouterLinkWithHref)); expect(link.attributes.href).toBe('/'); expect(link.nativeElement.textContent).toBe('test link'); }); it('should use routerLink for <a> tag if "redirect" binding is not specified', () => { const link = fixture.debugElement .query(By.css('.use-route')) .query(By.directive(RouterLinkWithHref)); expect(link.attributes.href).toBe('/test'); expect(link.nativeElement.textContent).toBe('test link'); }); it('should default "redirect" binding to false', () => { expect(useRoute.redirect).toBe(false); }); it('should use href for <a> tag if "redirect" is true', () => { const link = fixture.debugElement .query(By.css('.use-redirect')) .query(By.css('a')); expect(useRedirect.redirect).toBe(true); expect(link.query(By.directive(RouterLinkWithHref))).toBeNull(); expect(link.nativeElement.href).toBe('localhost:4200'); expect(link.nativeElement.textContent).toBe('test link'); expect(useRoute.redirect).toBe(false); }); it('should use the bound value as the link template context', () => { const link = fixture.debugElement .query(By.css('.link-with-context')) .query(By.css('a')); expect(link.query(By.css('h3')).nativeElement.textContent).toContain( component.bookmark.title ); expect( link.query(By.css('img')).nativeElement.getAttribute('src') ).toContain(component.bookmark.imgUrl); expect(useRoute.redirect).toBe(false); }); }); 经过大量调查，我对这个问题实施了不同的方法，因为我的<a href>...</a>内部包含代码（例如可点击的div）。例如，我不想使用 ngIf，因为这迫使我复制 div 的内部代码。这就是我的解决方案： 组件 HTML <div> <a [href]="getRouterLink()" > <div class="section"> <!-- stuff inside the div --> </div> </a> </div> 组件 JS Component({ selector: 'app-home-section', templateUrl: './home-section.component.html', styleUrls: ['./home-section.component.scss'] }) export class HomeSectionComponent implements OnInit { @Input() link: string; constructor(private router: Router) { } ngOnInit() { } isRouterLink() { if (this.link) { let firstLinkChar = this.link.charAt(0); let isSlash = firstLinkChar == '/'; return isSlash; } return false; } getRouterLink() { let url = this.isRouterLink() ? window.location.origin + this.link : 'http://' + this.link; return url; } } 这是使其工作更简单的唯一方法，因为即使我将“www.example.com”直接放入href（有或没有[ ]），它总是附加基本网址。虽然不漂亮，但是很实用。 [attr.href]="link || null" 我创建了 ngx-href 库，让您可以在需要时使用指令来替换默认的 href 逻辑。 如何使用 奔跑npm install ngx-href 将其添加到您的app.module.ts文件中 import { ngxHrefModule } from 'ngx-href' imports: [ ngxHrefModule.forRoot({}), ], 无论您打算在哪里使用 href 指令 import { ngxHrefModule } from 'ngx-href' imports: [ ngxHrefModule, ] 然后在你的html中 <a href="/angular/router/link"> My internal link </a> // This does also work with button ;) <button href="/angular/router/link"> My internal link </button> 阅读文档了解更多设置 @taras-d 的 directive 不再适用于较新版本的 Angular。 单击链接以更改两个角度屏幕之间的路径后，路由器会擦除 href 而不会触发 ngOnChanges。如果有人想使用指令，我添加了替代解决方案。 如果您仍然想使用指令，我已经修改了他的解决方案。由于它使用 ngDoCheck ，不幸的是它被频繁触发。因此，我添加了一些 if 子句来防止更改过于频繁 @Directive({ selector: '[externalLink]' }) export class ExternalLinkDirective implements DoCheck { @Input() externalLink: string; constructor( private el: ElementRef, @Optional() private link: RouterLinkWithHref ) {} ngDoCheck(){ if(this.externalLink && this.el.nativeElement.href != this.externalLink) { this.el.nativeElement.href = this.externalLink; } if(this.link && this.externalLink != this.link.href) { this.bindHrefToRouter(); } } private bindHrefToRouter() { if(!this.externalLink) {//if externalLink is null/not supplied, nothing to do here return; } if(this.link) { //if a [routerLink] directive was supplied but empty, we force it to follow the deeplink this.link.href = this.externalLink; this.link.onClick = () => { return true; }; }

如何正确声明 Angular 路由器的子路由？

我有以下路由： //根路由 常量路线：路线= [ { 小路： ''， component: AuthenticatedLayoutComponent, //所有子页面都会有标题 孩子们： [ {路径：...

只有子路由激活时父组件才会被激活

我想要这样的路线结构： 如果我转到“/sale”路线： 仪表板 特征 销售 如果我去“/”路线： 仪表板 也就是说，如果子路由没有激活的话...

在 Angular 中，只有子路由激活时，父组件才会被激活

我想要这样的路线结构： 如果我转到“/sale”路线： 仪表板 特征 销售 如果我去“/”路线： 仪表板 也就是说，如果子路由没有激活的话...

使用 Angular 和 Node Routing 加载没有 css 和 js 的视图

我正在构建一个使用 Node 和 Angular 路由的应用程序。我想处理 Angular 中的所有路线。 文件夹结构： 民众 图片 CSS js 部分 _search.html 首页.html 索引.html 萨斯 全部

如何正确订阅observable paramMap Angular？

我可以从paramMap获取参数： this.route.paramMap.subscribe((params: ParamMap) => { this.templateService.get(+params.get("id")!).subscribe((response: Json | JsonError) => { ...

Angular Router - 如何在 routerLink 更改时立即销毁旧组件

在 Angular 中，在 routerLink 触发路由更改后，旧组件只会在新组件初始化的同时基本被销毁： 这对我来说是个问题，因为我

Angular router.navigateByUrl 不会更改网站内容

我正在使用最新的角度（18）开发客户端应用程序。我试图让网站在登录后重定向到任务。但是当我导航时，它会更改 URL 并且网站保留在登录页面上，w...

Angular 客户端动态路由重定向到页面重新加载时的通配符路由

在角度应用程序中，我有数百条动态路线。在 API 调用后添加到路由配置中。 但是当我使用动态路由重新加载同一页面时，浏览器将请求发送到服务器并返回...

我无法路由到角度中的另一个组件

<div class="mr-3 ml-3 mt-0 mb-4 leave_card_outer" *ngIf="leaveStatus !=null"> <div class="row bg-white p-2"> <div class="col py-3 leave_card_inner" *ngFor="let status of leaveStatus | keyvalue ;index as index"> <a [routerLink]="['dstatus-fr']" class=""  (click)="setViewData(status.key)"> <h3>{{ status.key | lowercase | translate | titlecase}}</h3> <p class="mt-3 mb-0 card_text" [ngClass]="getStatuskColor(status.key)"> {{status.value}}</p> </a> </div> </div> </div> 这是我的html文件 setViewData(leaveStatus: string) { console.log("fromdate",leaveStatus,this.fromDate_YYYY_MM_DD,"todate",this.toDate_YYYY_MM_DD); } 这是我的ts文件 import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterModule, Routes } from '@angular/router'; import { ChartboardFRComponent } from './chartboard-fr.component'; import { ViewstatusFrComponent } from './viewstatus-fr/viewstatus-fr.component'; const routes: Routes = [ { path: "", component: ChartboardFRComponent }, { path: "dstatus-fr", component: ViewstatusFrComponent } ]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class ChartboardFRRoutingModule { } 最后这是我的路由文件，其中包含各自的路由详细信息 我们需要在单击 setviewdata 时路由到 ViewstatusFrComponent 在此输入链接描述 <a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" fragment="education"> link to user component </a>

Angular 路由：是否可以针对不同的语言使用不同的“路径”字符串？

我正在做一个 i18n Angular 应用程序，到目前为止效果很好。 但是，我对不同的语言有相同的路由字符串，这对于 SEO 来说并不是最好的。 是否可以拥有路由数组的“路径”属性...

未使用 withComponentInputBinding 设置子路由参数

在 Angular 18 应用程序中，我无法设置子路由参数。 我有一条路线定义为 导出常量路由：路由= [ { 路径：'测试'， 孩子们： [ { 路径: ':操作/:id',

XL 屏幕上同一页面中有两个<ion-router-outlet>

我的应用程序具有以下页面结构： /家 /菜单 /一个 /B /行政 所以 /menu/A 和 /menu/B 是两个不同的页面。不管怎样，在非常大的（XL）屏幕上，我可以并排显示它们。所以我...

路由编码 Angular 12：路由未按预期工作

最近将 Angular 应用程序从版本 9 升级到版本 12。 现在，我当前的路线不起作用，并编码为 %23。 这是我的路线示例： { 路径：'应用程序终端请求列表'，compone...

具有动态前缀的角度路由

我有一个成功页面，我想在执行某些操作后重定向到该页面。 目前我的网址在重定向后只是 localhost:4200/success 但我希望我的网址将 /success 附加到 wha...

如何无限期地重新加载页面？

下面的代码在初始页面渲染（加载）后重新加载页面一次。发出第一次重新加载请求后，它不会重新加载页面。我想知道如何无限期地重新加载页面。在...

使用redirectTo在Angular RoutingModule中重定向时如何维护查询参数？

总结 我想在我的 Angular RoutingModule 中从一个路径重定向到另一个路径，同时维护查询参数。但是，当重定向完成时，查询参数将不再存在。 T...