标签: angular-routing

Angular 2 有没有办法获取这种 URL？

http://example.com/the-route?param[]=value1&param[]=value2&param[]=value3

我试图像应该那样使用queryParams，Router但由于 queryParams 接受一个对象，所以我不能这样做：

this.router.navigate(['/the-route'], queryParams: { 'param[]': 'value1', 'param[]': 'value2', 'param[]': 'value3' });

因为，当然，我不能param[]在对象中多次使用相同的名称（）

我正在努力解决如何做到这一点，但找不到方法

我看过这篇文章： Angular 2 pass array to router queryString。但没有正确答案

我有一个显示 API 查询结果的组件。我想添加一个下拉框，以便可以过滤列表，但当 url 查询参数更改时，我似乎无法重新加载页面。

<div>
  <H2>Products</H2>
  <form>
    Filter By Manufacturer
    <select (change)="onManufacturerChange($event.target.value)">
      <option value="">All</option>
      <option [value]="m" *ngFor="let m of manufacturers">{{m}}</option>
    </select>
  </form>
  <ul>
    <li *ngFor="let p of products"><B>{{p.manufacturer}}</B> - {{p.name}}</li>
  </ul>
</div>

和打字稿

export class ProductListComponent implements OnInit {

  public products: Array<object> = [];
  public manufacturers: any = [];
  public manufacturer: string = "";
  public search: string = "";

  constructor(private _assetService: AssetService, private router: Router, private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.queryParams.subscribe(params => {
      console.log(params);
      if('manufacturer' in params){ …

在 Angular 工作了一段时间后，我意识到我们在路由的数据订阅者中没有设置任何数据类型。因此，例如，使用以下路由配置：

{
  path: '',
  data: {
    name: 'Bob' // type: string
  },
  resolve: {
    cars: CarsResolver // resolves to type: Car[]
  }
}

当订阅路线数据时，我们无法知道期望的数据类型

ngOnInit(): void {
  this.route.data.subscribe(data => 
    data.cars // type: any
    // data is a type of Data, unfortunately there's nothing like this.route.data<type>
  });
}

这对于智能感知的正常工作很有用，当然也有助于在编译时捕获各种错误。目前有没有办法指定数据结构？先感谢您。

我的一个延迟加载模块遇到了一个问题，当在子路由之间导航时，父组件被完全破坏和重建。

该系统包括许多延迟加载的模块，其路由定义如下（请原谅命名，我不得不混淆一些东西）：

 {
    path: '',
    canActivate: [DefaultLandingGuard],
    component: LandingComponent,
    pathMatch: 'full',
    data: { permissions: [] }
  },
  {
    path: 'main',
    loadChildren: './main/main.module#MainModule'
  },
  {
    path: 'secondary',
    loadChildren: './secondary/secondary.module#SecondaryModule',
    data: { game: GAME.SECONDARY}
  },

该问题特别发生在辅助模块中，如下所示：

{
    path: 'racing',
    data: { permissions: [] },
    component: RacingComponent,
    children: [
      { path: '', redirectTo: 'TODAY', pathMatch: 'full' },
      {
        path: ':timePeriod',
        component: RacingRegionListComponent
      },
      {
        path: ':timePeriod/:region',
        component: RacingRegionListComponent
      },
      {
        path: ':timePeriod/:region/:venue',
        component: RacingRegionListComponent
      }
    ]
  },

外观RacingComponent如下：

<racing-navigation></racing-navigation>

<router-outlet></router-outlet>

在该 …

我正在 Angular 9 应用程序中工作，并且仅当我的应用程序状态 (ngrx) 具有属性 != null 时，我才尝试加载（或不加载）特定模块

首先，我的路线中有一个 AuthGuard，但带有 canActivate。所以我希望“仪表板”模块仅在 mt AppState 有令牌时加载

这是我的路线文件

const routes: Routes = [
{
  path: '',
  component: AppLayoutComponent,
  canActivate: [ AuthGuard ],
  children: [
    { path: '',  loadChildren: () => import('./pages/modules/dashboard/dashboard.module').then(m => m.DashboardModule) }
  ]
},
{
  path: '',
  component: AuthLayoutComponent,
  children: [
    { path: 'session',  loadChildren: () => import('./pages/modules/session/session.module').then(m => m.SessionModule) }
  ]
},
{
  path: '**',
  redirectTo: 'session/not-found'
}];

这是我的 AuthGuard。它 localestorage 没有会话，然后重定向到登录页面。

@Injectable()
export class AuthGuard implements CanActivate { …

我的 Angular 9 应用程序有一个 CustomErrorHandler 和一个 ErrorPageComponent。当整个应用程序抛出任何异常时，CustomErrorHandler 将告诉路由器导航到 ErrorPageComponent。但是，ErrorPageComponent 内部有一个按钮可能会抛出自己的异常，在这种情况下，我希望 CustomErrorHandler 仍然告诉路由器导航到 ErrorPageComponent，就像正常情况一样。然而，当ErrorPageComponent以这种方式路由到自身时，它需要再次调用其初始化方法。

通常，如果您希望组件在路由到自身后调用初始化方法，只需订阅路由事件即可。然后，只要你正确设置了 onSameUrlNavigation 来重新加载，当组件导航到自身时，路由器就会触发一个路由事件，并调用你的组件订阅它的回调方法。

但是，当我的 CustomErrorHandler 告诉路由器导航到 ErrorPageComponent 时，不会触发任何路由事件。

如果您查看代码，这会更有意义：

这是我在 app-routing.module.ts 中的路由配置：

const routes: Routes = [
  { path: 'normal', component: NormalComponent},
  { path: '',   redirectTo: '/normal', pathMatch: 'full'}
];

const volitileRoutes: Routes = [
  { path: 'error', component: ErrorPageComponent}
];

const fallbackRoute: Routes = [
  { path: '**', component: Error404PageComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes),
    RouterModule.forRoot(volitileRoutes, {onSameUrlNavigation: 'reload'}), // I've correctly set onSameUrlNavigation …

我正在尝试使用Angular 的路由指南在 Angular Ionic v5 应用程序中实现嵌套/子路由的简单示例。我使用ionic start并选择了blank模板创建了一个项目，然后创建了两个组件ChildAComponent和ChildBComponent。以下是相关代码片段home.page.html：

<div id="container">
  <strong>Ready to create an app?</strong>
  <p>Start with Ionic <a target="_blank" rel="noopener noreferrer"
      href="https://ionicframework.com/docs/components">UI Components</a></p>
  <div id="stuff">
    <a routerLink="child-a">Child A</a><br>
    <a routerLink="child-b">Child B</a><br>
    <a routerLink="404">404</a>
  </div>
  <div id="thing">
    <router-outlet></router-outlet>
  </div>
</div>

我正在尝试使用a标签来驱动在router-outlet. 当我第一次加载页面（URL：）时，/home我可以单击其中一个链接，相应的子元素会在插座中呈现。然而，当这种情况发生时href，标签上的 s a（我假设是 Angular 基于 s 放置在那里的routerLink）全部更改为导航到的 URL。

因此，我无法单击其他组件链接来呈现该组件而不重新加载页面（返回到/home）。

单击链接之前（URL 为/home）： …

我有 Angular 应用程序，它使用路由，构建并部署到 S3 存储桶。如果我转到应用程序 URL 的根目录，它就可以正常工作。例如www.my-app.com.s3.foo.bar.amazonaws.com/

它在应用程序内运行良好。例如，如果我跟踪指向 ['/home'] 的路由器链接，它会转到www.my-app.com.s3.foo.bar.amazonaws.com/home等等。

但是，如果我直接访问，例如，www.my-app.com.s3.foo.bar.amazonaws.com/home我会收到 S3 错误，指出资源不存在。这是事实 - S3 存储桶中没有与 /home 对应的文件。

如何确保 URL 请求通过应用程序而不是 S3 路由？

更新：看起来 CloudFront 可能会这样做。我在 CloudFront 中配置什么？

我想在我的标题中实现一个后退按钮：它将从子路由返回到父路由！

假设我有以下嵌套路由：/ => /bar => /bar/foo

现在，如果我在 Foo 组件中添加一个“返回”按钮，我可以简单地执行以下操作

 this.router.navigate([".."], { relativeTo: this.activatedRoute });

然而，在我的例子中，后退按钮位于标题（AppComponent）中，这意味着上面的代码不起作用，我猜ActivatedRoute指向/

斯塔克闪电战

所以，我的问题是，如何在没有 ActivatedRoute 的情况下导航回（子级到父级）？

更新：我仍在研究这个解决方案，我感觉它应该有效（但现在不行）：

 const activatedRoute = this.injector.get(ActivatedRoute);
 this.router.navigate(['..'], { relativeTo: activatedRoute });

斯塔克闪电战

我正在 Angular 15.2.9 中实现一个功能性路由器防护，它检查用户是否登录。如果不是这种情况，防护应该返回 或falsea UrlTree（即重定向到登录页面），具体取决于参数redirectToLogin: boolean。

我正在使用类似于本文中的功能路由防护的工厂函数：

export const isLoggedIn = (redirectToLogin: boolean): CanActivateFn => {\n  return (next: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {\n    const isLoggedIn = !!inject(CookieService).check(\'some_cookie\');\n\n    if (isLoggedIn) return true;\n    if (!isLoggedIn && !redirectToLogin) return false;\n\n    const redirectUrl = inject(Router).createUrlTree([\'user\', \'sign_in\'], {\n      queryParams: { next: encodeURIComponent(`/${next.url.join(\'/\')}`) },\n      queryParamsHandling: \'merge\',\n    });\n    return redirectUrl;\n  };\n};\n

它的工作原理与预期一致，但我无法为其编写规范：

  let cookieServiceSpy;\n  let activatedRouteSnapshot;\n\n  beforeEach(() => {\n    cookieServiceSpy = jasmine.createSpyObj<CookieService>([\'check\']);\n …