标签: angular-router

我有一个带有延迟加载模块的 Angular 4.3.6 应用程序。这是一个部分根路由器：

const routes: Routes = [
  { path: '', redirectTo: 'fleet', pathMatch: 'full' },
  {
    path: '',
    component: AppComponent,
    canActivate: [AuthenticationGuard],
    children: [
      {
        path: 'fleet',
        loadChildren: "./modules/fleet.module",
        canActivate: [AuthenticationGuard]
      },
      {
        path: 'password/set',
        loadChildren: "./modules/chooseNewPassword.module",
        canActivate: [ChoosePasswordGuard]
      }
    ]
  }
]
// Exports RouterModule.forRoot(routes, { enableTracing: true });

这两个示例模块中的我的子路由器：

舰队：

RouterModule.forChild([
  {
    path: '',
    component: FleetComponent,
    canActivate: [AuthenticationGuard]
  }
]);

选择新密码：

RouterModule.forChild([
  {
    path: '',
    component: ChooseNewPasswordComponent,
    canActivate: [ChoosePasswordGuard]
  }
]);

该AuthenticationGuard调用一个方法，看起来像这样：

return this.getUserSession().map((userSession: …

错误：路由 '{path:"teams/", redirectTo:"all"}' 的配置无效：请提供 'pathMatch'。'pathMatch' 的默认值是 'prefix'，但通常意图是使用 'full'。

这是错误按摩。

这是我在 app.module.ts 上的语法：

 const routes = [
 { path: 'teams', component: TabsComponent, children: [
    { path: '', redirectTo: 'all', pathMacth: 'full' },
     { path: ':side', component: ListComponent }
     ] },
{ path: 'new-team', component: CreateTeamComponent },
{ path: '**', redirectTo: '/teams' }

];

为什么我还是有错误？？

在我当前的注销呼叫中，我有这样的事情：

 getLogoutConfirmation(){
   // get confirmation in modal and perform logout
   // redirect to login page
 }

问题是，当执行注销并调用重定向到登录时，会在该路由上调用 canDeactivate 防护，但用户已经注销。

那么如何在执行注销之前调用 canDeactivate 守卫并在用户不想离开时取消注销操作。

谢谢。

我正在使用 Angular 6，但我在更改路线时遇到了问题。如果我使用 routerLink 或 navigate() 方法浏览应用程序，它会正常工作，因为它只加载新模块（如有必要）。但是，例如，如果我在此链接中：localhost:8080/home，我单击 URL，取消“主页”，输入“配置文件”并按 Enter，它正确进入配置文件页面，但应用程序已重新加载（也是应用程序组件）。为什么？我想不通。这是我的路由：

const appRoutes: Routes = [
  { path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
  { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard] },
  { path: 'login', component: LoginComponent },
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

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

也许问题出在 auth-guard 上？

@Injectable()
export class AuthGuard implements CanActivate {

constructor(private store: …

任务-为Angular库创建一个可重用的button / anchor标记属性选择的组件，该行为本身的大部分逻辑都绑定在该组件本身上，而不是在HTML标记上。

HTML标记在理想情况下应尽可能整洁

<a routerLink="" attributeSelectorForComponent></a>

问题-尝试[attr.disabled]通过单击侦听器防止锚标记上出现routerLink时触发。

  @HostListener('click', ['$event']) onMouseClick(event: Event) {
    event.stopImmediatePropagation();
    event.preventDefault()
  }

为了简化起见，从等式中删除了禁用的逻辑，无论如何，仍会触发routerLink。

建议的解决方案- 如何有条件地禁用routerLink属性？并不能真正解决我的问题，禁用指针事件只会禁用鼠标事件而不是键盘事件，并且还会阻止我删除指针事件：没有鼠标悬停，单击ect要求相对复杂的操作解决方案，以检测disable属性并相应地删除css，并且通常似乎比正确的解决方案更讲究技巧。

角度版本:4

从LoginComponent(位于public/signin路径中)登录后,我想要TestComponent在路径中导航public/test.我这样做如下:this._router.navigate(['public/test']) 然后,它正确地重定向但问题是它不会LoginComponent从DOM中删除(尽管ngOnDestroy会被调用).

值得一提的是,导航到按预期TestComonent使用的 <a routerLink='/public/test'>Test</a>工作.

我究竟做错了什么？

app.routing.ts:

const APP_ROUTES:Routes = [
  {path: 'public', loadChildren: './authentication/authentication.module#AuthenticationModule'}
];

export const APP_ROUTING:ModuleWithProviders = RouterModule.forRoot(
APP_ROUTES, {
useHash: false, enableTracing: true, initialNavigation: true});

`authentication.routing.ts(这两个组件都属于):

const routes: Routes = [
    {
        path: '',
        children: [
            {path: 'test', component: TestComponent},
            {path: 'signin', component: LoginComponent},
        ]
    }
];

export const routing = RouterModule.forChild(routes);

在 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已过期。我希望它们能够同步。

我的应用程序上有一个注册流程。在每个步骤中，我不希望用户能够转到上一页，但是，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 版本，需要下载并在本地运行）

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