标签: angular-router

我想创建一个带有多个参数的路由链接,并将它们绑定在tempalte中.到目前为止,我一直在通过执行(click)事件的函数来做到这一点,但我想知道它是否可能在RouterLink绑定中.

这是我用来绑定参数的函数:

redirect() {
    this._router.navigate( ['/category', { cat: this.category, page: this.page }]);
}

我的路线看起来像:

{
    path: 'category/:cat/:page',
    component: PostComponent
}

我可以做同样的内部routerLink指令吗？

我正在使用angular-cli-1.6.3捆绑我的项目.我尝试将延迟加载的块名称重命名为有效的模块名称.但它没有用.代码片段如下,

{path:'lazy',loadChildren:'./ lazy/module#LazyModule？chunkName = LazyModule'}

我在 Angular-CLI 和 .NET Core 2.0 中使用 Angular 5.2.2（打字稿）。

我正在尝试向我的应用程序动态添加其他路由。

这个想法是我从服务器动态获取我的路由，该服务器检查哪些模块应该可供用户使用。但我似乎无法获得可用的路线。

我尝试使用添加它们，RouterModule.forRoot但这不起作用。

我试过使用，Router.resetConfig但我似乎无法让它工作。我尝试使用依赖注入在我创建的函数中获取它，但我最终得到了循环依赖：

Uncaught Error: Provider parse errors:
Cannot instantiate cyclic dependency! ApplicationRef ("[ERROR ->]"): in NgModule AppModule in ./AppModule@-1:-1

这是我拥有的一些代码：

app-routing.module.ts

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { Routes, RouterModule, Router } from '@angular/router';

var routes: Routes = [{ path: '', loadChildren: "../app/modules/f2p-dashboard/f2p-dashboard.module#F2PDashboardModule" }];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: AppConfigServiceFactory,
      deps: [F2PModuleService, Router ],
      multi: true
    } …

昨天我遇到了一个似乎mat-drawer与 Angulars相关的 CSS 问题router-outlet。我有一个带两个孩子的整页 flexbox。mat-toolbar顶部的A和app-sidenav底部的自定义组件。这工作正常并且 app-sidenav 填充页面的其余部分，因为 flexbox 是有弹性的。在继续之前看看这个简化的设置：

<div class="flex">
  <mat-toolbar></mat-toolbar>
  <app-sidenav></app-sidenav>
</div>

相关的css是

.flex { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: stretch; }
mat-toolbar { flex: 0 0 auto; }
app-sidenav { flex: 1 1 0; }

在app-sidenav组件中，我现在有以下模板

<mat-drawer-container>
  <mat-drawer></mat-drawer>
  <mat-drawer-content>
    <main><router-outlet></router-outlet></main>
  </mat-drawer-content>
</mat-drawer-container>

相关的样式是

mat-drawer-container, mat-drawer-content { display: block; height: 100%; }
main { height: 100%; overflow-y: auto; }

这工作正常并且高度是合适的，除非没有大于app-sidenav高度的内容。滚动条出现在外部 flexbox 组件而不是 …

我遇到了以下问题:当我导航到或通过浏览器刷新时,通过AuthGuard服务保护的个人部分被加载两次.如果我提供任何URL,它第二次剥离URL的查询参数.这是我的app路由器配置:

const routes: Routes = [
  {
    path: 'search',
    redirectTo: '',
    pathMatch: 'full'
  },
  {
    path: '',
    component: BookmarksComponent
  },
  {
    path: 'tagged/:tag',
    component: TagComponent
  },
  {
    path: 'about',
    component: AboutComponent
  },
  {
    path: 'personal',
    loadChildren: 'app/personal/personal-bookmarks.module#PersonalBookmarksModule'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

和子路由器配置

@NgModule({
  imports: [RouterModule.forChild([
    {
      path: '',
      component: PersonalBookmarksComponent,
      canActivate: [AuthGuard],
      children: [
        {
          path: '',
          component: PersonalBookmarksListComponent
        },
        {
          path: 'new',
          component: NewPersonalBookmarkFormComponent
        },
        {
          path: …

我们正在使用Lazy Loading for Router Modules.

  {
    path: 'users',
    loadChildren: 'app/users/users.module#UsersModule',
  },

但是当我们更新我们的应用程序版本(将新捆绑包上传到服务器)时,它总是被破坏:旧应用程序(用户已经下载)尝试获取不再在服务器上的旧块文件.

实例:https://alexshakura.github.io/chunk-error/ (我只是重命名块以突出显示错误)

处理此错误的正确方法是什么？

我来介绍一下这些步骤:

1. AppVersion1由用户加载(没有延迟加载的块)
2. 我们将应用程序和上传的软件包更新到了​​服务器(所以目前AppVersion2是正确的)
3. 用户(仍然有AppVersion1)进入加载延迟模块的路由,但它尝试从AppVersion1加载不再存在的块.

我将我的应用程序拆分为两个模块:一个具有主要基本功能,另一个具有较少使用的功能,如帐户设置,常见问题页面等.

我想要完成的是为某些根路径路径延迟加载第二个模块,/account无论/settings是否需要创建许多不同的模块.据我所知,Angular延迟加载仅适用于一个根路由,并且延迟加载模块中配置的路由被设置为该路由的子路由.

 {
        path: 'account',
        loadChildren: './modules/settings/settings.module#SettingsModule',
 },
 {
        path: 'settings',
        loadChildren: './modules/settings/settings.module#SettingsModule',
 },

你怎么能得到你当前的路线并得到它的数据,孩子和它的父母？

如果这是路线结构:

const routes: Routes = [
  {path: 'home', component: HomeComponent, data: {title: 'Home'}},
  {
    path: 'about', 
    component: AboutComponent, 
    data: {title: 'About'},
    children: [
      {
        path: 'company',
        component: 'CompanyComponent',
        data: {title: 'Company'}
      },
      {
        path: 'mission',
        component: 'MissionComponent',
        data: {title: 'Mission'}
      },
      ...
    ]
  },
  ...
]

如果我目前在CompanyComponent,我如何得到我当前的路线w/c是公司,得到它的父母w/c是关于,它的数据和它的兄弟姐妹,如任务等？

我想知道在Angular 5中加载数据的最佳方法是什么.当然,我们希望保持组件哑;;现在,我正在使用一个解析器,Angular在特定路径中调用解析器.基本上,数据在组件初始化之前加载,因此我可以向用户显示加载器动画.

例如.

AResolver.resolver.ts

@Injectable()
export class AResolver implements Resolve<any> {
    constructor(private readonly aService: AService) {}

    resolve(route: ActivatedRouteSnapshot) {
        return this.aService.find(route.paramMap.get('id'));
    }
}

M.module.ts

export const MRoutes: Routes = [
    {
        path: 'route-x',
        component: AComponent,
        resolve: AResolver
    }
];

AComponent.component.ts

@Component({
    selector: 'a-super-fancy-name',
})
export class AComponent {

    constructor(private readonly route: ActivatedRoute) {}

}

好吧,到目前为止一切顺利,但是:

1. 如果我有依赖的解析器怎么办？那么,要解决B我们需要一个来自A的id？我应该使用旋转变压器包装吗？因此,我做了类似的事情:

例

@Injectable()
export class ABResolver implements Resolve<any> {

    constructor(private readonly aService: AService, private readonly bService: BService) {}

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        return this.aService.resolve(route, …

我想知道是否有办法在Angular7中命名我的路线,所以我可以调用[routerLink]="myRouteName"而不是[ routerLink]="/my/route/path".

如果是这样,我怎么能做到这一点？