标签: angular-router

我一直在寻找一种方法来启用标准的[href]链接,以便在动态加载到[innerHTML]时充当routerLinks.它似乎不是标准的东西,我找不到任何我需要的东西.

我有一个可行的解决方案,但想知道是否有人知道有任何更好的方法来做到这一点或任何潜在的问题,我可能会这样做.

我在app-routing.module.ts中使用jQuery,所以我声明了变量:

declare var $:any;

然后我找到所有具有href属性但没有routerlink属性的锚点.然后我可以获取路径名并告诉路由器在点击时导航到它.

$(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]);
    }
});

这似乎做了这个工作,但我认为必须有一个更"'角度'的方式这样做......

我有以下儿童路线:

{ path: '', component: LoginSingupComponent,
  children: [
    { path: 'login', component: LoginComponent },
    { path: 'singup', component: SingupComponent },
  ]
},

导航到/login或/singup工作正常(加载了正确的组件).

这是摘录自 LoginSingupComponent

<nav md-tab-nav-bar class="mb-1">
  <a md-tab-link routerLink="/login" routerLinkActive [routerLinkActiveOptions]="{exact: true}" #rla="routerLinkActive" [active]="rla.isActive">Entrar {{rla.isActive}}</a>
  <a md-tab-link routerLink="/singup" routerLinkActive [routerLinkActiveOptions]="{exact: true}" #rla="routerLinkActive" [active]="rla.isActive">Criar uma conta{{rla.isActive}}</a>
</nav>

当/login所有rla.isActive == false的时候/singup都rla.isActive == true

尝试与否 exact: true

我正在尝试使用Laravel REST API创建一个简单的CMS系统。对于前端，我使用Angular 4框架和angular CLI。现在，我正在尝试生成动态路由（通过使用服务从API提取页面并为每个页面生成路由）。我用本地数据模拟进行了尝试，并使它像这样工作。

Routing.module.ts

let cmsService: CmsService = new CmsService();
const pages = cmsService.getPageNames();

const routes: Routes = [
  { path: '', component: OverviewComponent },
  { path: 'login', component: LoginComponent}
];

for (let i = 0; i < pages.length; i++) {
  routes.push(
    { path: pages[i].toString(), component: PageEditComponent}
  );
}

我知道这可能不是做事的最佳方法，但它确实有效。现在，我必须注入HTTP，整个过程都失败了，因为以下内容不再起作用，因为它期望注入HTTP。

let cmsService: CmsService = new CmsService();

我可能可以通过以某种方式使http变量传递它，但感觉有点脏。所以我开始怀疑是否没有更简单的方法可以做到这一点。例如，按预期方式注入服务，而不是创建新服务。并为以这种方式检索的页面创建路由。

提前致谢！

我的Root模块的路由是这样的:

        RouterModule.forRoot([
        { path: '', redirectTo: 'management-portal', pathMatch: 'full' },            
        { path: 'management-portal', loadChildren: './xxx/management-portal.module#ManagementPortalModule', canActivate: [AuthGuard] },          
        { path: 'login', component: LoginComponent },
        { path: '**', component: NotFoundComponent }
    ], {
       enableTracing: true 
    })

它按预期工作,我可以在登录后路由到ManagementPortalModule.让我们来看看我的懒惰的ManagementPortalModule.

有一个命名的路由器插座.

 <router-outlet name='sub'></router-outlet>

我在ManagementPortalModule中的路线.

    RouterModule.forChild([
  {
    path: '', component: ManagementPortalComponent,        
    children: [            
        { path: '', component: Test1Component, outlet: 'sub' },
        { path: 'test2', component: Test2Component, outlet: 'sub' }            
    ]
  }         
])

它可以在开始时在'sub'出口加载Test1Component.我点击链接时想要路由到Test2Component

<a  [routerLink]="[{ outlets: { sub: ['test2'] } }]"></a>

生成的Url

/管理门户/(子:TEST2)

当我点击时没有任何反应.然后我试了一下

<a …

对于访问我们网站的SEO和遗留外部链接,我们需要为弃用的网址提供后备路由.命名出口的事情变得棘手.现在尝试找到正确的设置,以指定重定向到更新的命名插座的路由.

例如:
https://url.com/prod/000( myOutlet:foo) 应重定向到 https://url.com/prod/000(newOutlet:some/foo), 而000当然是动态的

现在一些反映新旧路线的代码:

OLD:
https://url.com/prod/000(myOutlet:foo)
https://url.com/prod/000(myOutlet:bar)
{
  path: ':vars',
  outlet: 'myOutlet',
  component: VarsComponent
}

NEW:
https://url.com/prod/000(newOutlet:some/error)
https://url.com/prod/000(newOutlet:some/empty)
https://url.com/prod/000(newOutlet:some/foo)
https://url.com/prod/000(newOutlet:some/bar)
{
    path: 'some',
    outlet: 'newOutlet',
    component: VarContainerComponent,
    children: [
      {
        path: 'empty',
        component: VarEmptyComponent
      },
      {
        path: 'error',
        component: VarErrorComponent
      },
      {
        path: ':var', // OLD implementation should point here
        component: VarContentComponent
      }
    ]
  }

如何指定OLD实现重定向到新路径:':var'route？

// fake assumption, redirectTo code not working
// 1. simpler solution, using just a static route (currently …

我试图在导航到子级路由之前解析数据，因为我必须在儿童警卫队中使用该数据。问题是父级解析器，在解雇了儿童看守后解析数据。解析器需要很长时间才能解析数据

// app.module.ts
const appRoutes: Routes = [
  { path: 'login', component: LoginComponent },
  {
    path: '',
    component: SiteLayoutComponent,
    children: [
      { path: '', redirectTo: 'warehouse', pathMatch: 'full' },
      {
        path: 'warehouse',
        loadChildren: './warehouse/warehouse.module#WarehouseModule'
        // loadChildren: () => WarehouseModule
      }
    ],
    canActivate: [AuthGuard],
    resolve: {
      Site: SiteResolver // should be resolved before the guard is invoked.
    }
  },
  { path: '**', component: PageNotFoundComponent }
];

// warehouse.module.ts
const appRoutes: Routes = [

    { path: '', redirectTo: 'cash', pathMatch: 'full' }, …

问题：是否存在定义单页应用程序路由的最佳实践？

在Angular项目中，功能通常在延迟加载的模块中分开，然后在路由AppRoutingModule和延迟加载的模块中配置路由。

假设该应用将管理目录，例如：产品。路由可以这样配置：

选项1：

• 清单： /products
• 创建： /products/create
• 读： /products/:id
• 更新： /products/:id/edit

它可以工作，但看起来有点混乱，并且和之间有些歧义/products/:id，/products/create因为参数:id可以匹配字符串“ create”。示例代码：

app-routing.module.ts：

const routes: Routes = [
    {
        path: '',
        children: [
            { path: 'products', loadChildren: 'app/products/products.module#ProductsModule' },
        ]
    }
];

products-routing.module.ts

const routes: Routes = [
    { path: '', component: ListProductsComponent },
    { path: 'create', component: CreateProductComponent },
    { path: ':id', component: ViewProductComponent },
    { path: ':id/edit', component: EditProductComponent },
];

选项2

• 清单： /products
• 创建： /products/create
• 阅读：（ …

我在导航到提供状态的过程中遇到了Angular路由器的问题.

我试过使用自定义后卫canLoad()和canActivate()功能返回布尔值true没有任何运气.

Angular 文档声明如下:

NavigationCancel:取消导航时触发的事件.这是由于Route Guard在导航期间返回false.

由于我没有从路由器跟踪中获得更多调试信息(没有给出任何理由),我被迫在这里检查是否存在修复,或者这是否是现有错误.我也很欣赏有关在Angular 6中调试路由器的其他方法的任何信息.

控制台输出

我在这里创建了一个小项目.该项目需要访问提供者,我正在使用angular-oauth2-oidc存储库中提供的提供的OpenID Connect提供程序.密码/用户名是max/geheim.

如何重现错误

1. 克隆仓库并在localhost:4200上提供网站服务
2. 转到localhost:4200/oversikt/index
3. 以max/geheim身份登录为用户名/密码
4. 阅读控制台

更新 我怀疑它与导航到children: []路线有关.

我正在尝试测试访问子级路由参数的Angular Resolver。

我的后卫工作正常，但是我无法轻松创建单元测试，因为我无法创建ActivatedRouteSnapshot带有子级路由（只读属性）。

我的解析器

@Injectable({
    providedIn: 'root'
})
export class MyResolverGuard implements Resolve<string> {

    constructor() {
    }

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): string {
        return route.firstChild.paramMap.get('my-param');
    }
}

我的测试：

    it('should resolve chilren route params', () => {
        guard = TestBed.get(MyResolverGuard);
        const route = new ActivatedRouteSnapshot();
        // Cannot assign children because it's a read only property
        route.children = [...];
        const myResolverParams = guard.resolve(route, null);
    });

除了使用模拟以外，还有其他方法ActivatedRouteSnapshot吗？

我的测试后卫方法好吗？

感谢您分享您的策略。

我有嵌套组件：

• 应用组件
  • 仅包含路由器插座
• 页面包装组件
  • 仅包含主菜单和另一个路由器插座
  • 需要在显示之前从 API 加载主菜单
• 内容组件
  • 包含实际的页面内容
  • 需要在显示之前从 API 加载页面内容

我使用 Router 的Resolve解析主菜单和页面内容：

const routes: Routes = [
  {
    path:        '',
    component:   PageWrapperComponent,
    resolve: {
        mainMenu: MainMenuResoler,
    },
    children:    [
      {
        path: '',
        component: ContentComponent,
        resolve: {
           content: ContentResolver,
        }
      }
    ]
];

我想在 MainMenuResoler 完成后立即显示主菜单（PageWrapperComponent）。ContentResolver 完成后，然后就是内容（ContentComponent）。但如何呢？

我预料到路由器会出现这种行为。相反，Angular 会等待两个解析器完成，然后同时显示 PageWrapperComponent 和 ContentComponent。