标签: angular-router

我需要在我的应用程序中使用“relativeTo”属性以及“routerLinkActive”指令。有一个单击侦听器功能，该功能使用路由

router.navigate(this.router.navigate(['path']{relativeTo:this.route});

会没事的。但在那种情况下，我不能使用 routerLinkActive 指令。

我怎样才能同时使用两者？

在 Angular 2 中，我在以下位置定义了路由app.module.ts：

const appRoutes: Routes = [
  { 
    path: '',
    component: HomeComponent,
  },
  {
    path: 'admin',
    component: AdminComponent,
  }
];

我还有一个app.component显示菜单和搜索表单的。它app.component连接到一个服务 ( events.service.ts)，该服务返回一个数组events。当提交搜索表单时，app.component调用服务来过滤事件，然后抓取它们：

getEvents(): void {
    this.eventsService.getEvents().then(events => {this.events = events});
}

onSubmit() {
    this.searchTerm = this.model.searchTerm;
    this.eventsService.search(this.searchTerm).then(res => this.getEvents());
}

我希望能够this.events从向下传递到(和)app.component中指定的两条路线。app.modulehomeadmin

我home.component.ts需要相同的events.service.ts，并在函数中从中获取事件onNgInit，但是当服务中的事件已通过 中的搜索进行更新时app.component.ts，在 的 初始化中获取的事件home.component.ts已过期。我希望它们能够同步。

我有一个从 api 和依赖于该解决方案的服务获取数据的解决方案。取决于解析的服务将向多个组件提供数据部分，并且预计仅在页面加载时运行一次。这是相关的代码（省略了导入和一些注释）：

产品详细信息.service.ts

@Injectable()
export class ProductDetailsService {
    private productDetails: ProductDetails;

    constructor(route: ActivatedRoute) {
        this.productDetails = route.snapshot.data['product'];
    }

    public getProductDetails(): ProductDetails {
        return this.productDetails;
    }
}

产品详细信息.resolve.ts

@Injectable()
export class ProductDetailsResolve implements Resolve<ProductDetails> {

    constructor(private httpService: HttpService) { }

    resolve(route: ActivatedRouteSnapshot): Observable<ProductDetails> {
        return this.httpService.getProductDetails(route.params['id']);
    }

}

app-routing.module.ts

const routes: Routes = [
    { path: 'main/:id', component: MainComponent, resolve: { product: ProductDetailsService } },
];

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

some.component.ts

export class …

我的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 …

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

在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 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吗？

我的测试后卫方法好吗？

感谢您分享您的策略。

我的应用程序上有一个注册流程。在每个步骤中，我不希望用户能够转到上一页，但是，ionic 使这些页面保持“活动”状态，并且用户可以通过从左向右滑动或使用后退按钮返回他们的电话。

我使用 ionic 的路由系统转换每个用户：

 this.router.navigateByUrl('/invite');

我也尝试过：

 this.router.navigate(['/invite']);

和：

 this.router.navigateByUrl('/invite', { skipLocationChange: true });

目前它给我带来了很多问题，我已经做了很多谷歌搜索，但找不到任何解决方案。

有没有办法使用 ionic 的路由器系统来销毁页面或禁止某些页面上的向后导航？任何建议都会很棒。谢谢。

我有这样的路径结构：/events/100/drawing/200事件和绘图是具有自己的路由表的单独模块，例如：

// Event ID routes
const routes: Routes = [
{
    path: ':eventID', 
    data: { breadcrumb: 'Drawings & Results' },
    component: EventComponent,

    children: [
        {
            path: 'drawing', 
            loadChildren: () => import('@app/modules/event-drawing/event-drawing.module').then(mod => mod.EventDrawingModule)
        }
    ]
}

和

const routes: Routes = [
{
    path: ':drawingID', 
    data: { breadcrumb: 'Drawing' },
    component: EventDrawingComponent
},
];

有一个面包屑向我显示当前路径，并且路由似乎有效。但无论如何，已EventComponent加载，但未按EventDrawingComponent预期加载。

我也尝试这样做来删除EventComponent：

// Event ID routes
const routes: Routes = [
{
    path: ':eventID', 
    data: { breadcrumb: 'Drawings …

当我使用自定义ngDoBootstrap函数而不是默认函数时bootstrap: [AppComponent]，如下所示：

@NgModule({
  imports:      [ BrowserModule, FormsModule, AppRoutingModule ],
  declarations: [ AppComponent, HelloComponent ],
  exports: [ AppComponent ],
  entryComponents: [ AppComponent ],
  // bootstrap: [AppComponent],
})
export class AppModule {
  constructor(private injector: Injector) {
  }

  public ngDoBootstrap(): any {
    const appElement = createCustomElement(AppComponent, { injector: this.injector });
    customElements.define('my-app', appElement);
  }
}

然后 应用程序路由被破坏。

它会忽略 URL 中的任何更改，并且仅在我单击 时才起作用 <a [routerLink]='...'>。此外，初始路线 / 未加载。

它一定是由自定义引导机制引起的，因为当我取消注释时bootstrap: [AppComponent]，一切正常。

完整代码可在此处获取：stackblitz 示例（由于 stackblitz 使用的 typescript 版本，需要下载并在本地运行）

如何使路由与自定义应用程序模块引导一起工作？

我有一个顶级路由器，它延迟加载子路由功能模块，在升级到 Angular v11.0.1 后已停止正常工作。

在 ng11 中的路由器事件处注销时，功能模块会被加载，并且RouteConfigLoadStart和RouteConfigLoadEnd都会通过正确的子路由器配置触发，但RoutesRecognized不会被调用。routerLink如果我第二次单击该链接（而不是），所有事件都会正常触发并加载相应的组件。

澄清一下：这不仅仅是链接的问题。它也不适用于初始页面加载，除非我转到不同的路线（第一次也不会加载），然后返回原始路线

此设置在 Angular v10.2.3 中可以正常工作（即只需单击一次并在初始加载时）

应用路由模块：

const routes: Routes = [
    {path: '', redirectTo: '/dashboard', pathMatch: 'full'},
    {path: 'browse', loadChildren: () => import('./browse/browse.module').then(m => m.BrowseModule)},
    {path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)},
    {path: '**', redirectTo: '/dashboard'}
];

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

仪表板路由模块

const routes: Routes = [
    {path: '', component: DashboardComponent},
    {path: ':id', component: DashboardComponent} …