标签: angular-router

我有一条路线孩子这样的路线:

{
    path: 'dashboard',
    children: [{
        path: '',
        canActivate: [CanActivateAuthGuard],
        component: DashboardComponent
    }, {
        path: 'wage-types',
        component: WageTypesComponent
    }]
}

在浏览器中我想获得激活的父路线

host.com/dashboard/wage-types

如何/dashboard使用Angular 2而不是JavaScript,但我也可以接受JavaScript代码,但主要是Angular 2.

我需要添加路由到MdDialog组件,我不知道解决这个问题的最佳方法是什么.

目前,在foo page(www.app.com/foo/1)上,用户可以单击一个按钮,它将打开一个MdDialog组件,bar.

我想要做的是,打开MdDialog后,它会附加/bar/:id到组件上.所以,例如它会是这样的www.app.com/foo/1/bar/1.目标是让用户拥有可以导致foo的可共享链接,然后打开MdDialog.

到目前为止,这就是我的应用程序的结构.

app/
  app.component.html <- <router-outlet> is found here
  app.component.ts
  app.module.ts

  foo/
    foo-routing.module.ts
    foo.component.html
    foo.component.ts
    foo.module.ts

    bar/
      bar.component.html <- This bar component file for the MdDialog
      bar.component.ts

  baz/ <- Another section of the website with it's own routing
    baz-routing.module.ts
    baz.component.html
    baz.component.ts
    baz.module.ts
    ...

目前在我foo-routing.module.ts,我有这个:

const routes: Routes = [
  {
    path: 'foo/:fooId',
    component: FooComponent,
    children: [
      {
        path: 'bar/:barId',
        component: BarDialogComponent
      }
    ]
  }
];

但是,这不起作用.所有这一切都是打开模块,重新路由到/,并且不允许我点击其他链接.

有人有什么建议或想法吗？谢谢!

我用Angular 5.x SPA替换了现有的AngularJS 1.6.x SPA，我想使更改对用户透明。

我担心有用户在现有应用程序中添加书签，因为该应用程序的URL中带有哈希值（例如：example.com/#/menu和example.com/#/item/37）；

但是，新应用程序的URL中没有哈希（例如：example.com/menu和example.com/item/37）。

路径和路由都相同，除了#/当前应用程序中的。

有没有一种方法可以配置Angular路由来删除 #/和使用新应用程序的无哈希路由配置？

我可以复制所有路由，以容纳带有或不带有哈希的路径，但是必须有一种不需要将代码加倍的方法。

// Don't really want to do this:
const routes: Routes = [
  {
    path: 'menu',
    component: MenuComponent
  },
  {
    path: '#/menu',
    component: MenuComponent
  },
  // etc.
];

同样，重定向每个#/路径也会使代码加倍。

// Don't really want to do this:
const routes: Routes = [
  {
    path: 'menu',
    component: MenuComponent
  },
  {
    path: '#/menu',
    redirectTo: 'menu'
  },
  // etc.
];

我希望这些方面能够有所帮助： …

我有动态路由，参数中可能包含斜杠或反斜杠，例如：

http://localhost:4200/dashboard/T64/27D 我应该导航到带有路线的页面 T64/27D

这是我如何导航 this.router.navigate(['dashboard/'+this.groupListPage[0].code]); this.groupList[0].code包含T64/27D

实际上 Angular 是分开的，T64并且27D是 2 个不同的页面。

这是错误：

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'dashboard/T64/27D'
Error: Cannot match any routes. URL Segment: 'dashboard/T64/27D'

我怎么能告诉 Angular 那/是 param 的一部分？

我想检查角度项目中是否存在路线。例如用户http://localhost:4200/#/timestamp在url栏中输入并且timestamp项目中不存在，您如何在不重定向的情况下进行检查？

我正在尝试使用 canDeactivate 路由器防护。第一次运行代码时，我传入的组件 (ClaimsViewComponent) 为空。但是在随后的运行中，代码会按预期运行。我们试图弄清楚为什么组件在第一次运行时为空。

这是 canDeactivate 守卫代码：

@Injectable()
export class ConfirmDeactivateGuard implements 
CanDeactivate<ClaimsViewComponent> {
  canDeactivate(target: ClaimsViewComponent): boolean {

      if (target.canDeactivate()) {
          return window.confirm('Do you really want to cancel?');
      }

      return true;
  }
}

这是路由模块代码：

const routes: Routes = [
{ path: ':type', component: ClaimsViewComponent, canDeactivate: 
[ConfirmDeactivateGuard] }
];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})

这是完整的错误堆栈：

TypeError: Cannot read property 'canDeactivate' of null
    at ConfirmDeactivateGuard.canDeactivate (confirm-deactivate-guard.ts:16)
    at MergeMapSubscriber.eval [as project] (router.js:3933)
    at MergeMapSubscriber._tryNext (mergeMap.js:128)
    at MergeMapSubscriber._next (mergeMap.js:118)
    at MergeMapSubscriber.Subscriber.next (Subscriber.js:95) …

我会从 Angular 5 的路由路径中检索一个参数

http://localhost:4200/#/dashboard/74618/LastCC

我会 74618从路由这是一个id参数。

我是这样处理的

constructor(public activatedRoute: ActivatedRoute)


this.activatedRoute.paramMap.subscribe(params => {
  console.log("params******");
  params.get("id");
});

我得到undefined作为价值。

当我在这条路上时它正在工作http://localhost:4200/#/dashboard/74618/ （没有\LastCC）

LastCC 是延迟加载的，这里是路由器配置：

const routes: Routes = [
  {
    path: "",
    component: CreditPointComponent
  }
];

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

id 参数位于父模块路由器配置（仪表板模块）上。

const routes: Routes = [
  {
    path: ":id",
    component: DashboardComponent,
    children: [
      {
        path: "LastCC",
        loadChildren:
          "app/useful-documents/credit-point/credit-point.module#CreditPointModule"
      }
    ]
  }
];

我想将JSON对象传递给另一个页面。我尝试过的是使用Angular路由器传递JSON字符串，ActivatedRoute如下所示：

this.router.navigate(['details', details]);

然后像这样检索它：

import { ActivatedRoute } from '@angular/router';


constructor(private activatedRoute: ActivatedRoute) { 
  }


ngOnInit() {

  this.activatedRoute.params.subscribe(extras => {
     console.log(extras);
     this.JSONObject = extras;
  });

}

可以这样做，但是嵌套的JSON对象变得无法访问。它变成了这个字符串：

"[object Object]"

字符串化的JSON对象很好，可以在我通过它之前进行访问。另一个问题是，它将JSON字符串附加到url，因此看起来不太好。从我的阅读中也可以看出，传递某种东西不仅仅是一种好id方法。

我在想类似在Android活动之间传递对象作为意图附加项的事情。我已经搜索了文档，论坛和以前的stackoverflow问题，但没有找到任何能使我实现这一目标的解决方案。使用Ionic4中的Angular路由器还有其他方法在页面之间传递对象吗？

在我的Angular项目中，自定义404页面有一个名为“ wrongRouteComponent”的组件。当有人输入非预定义的路线时，应显示“ wrong-route.component.html”。我不知道该怎么做。

这是我使用过的“ app-rouring.module.ts”。

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

// Required components for which route services to be activated
import { LandingComponent } from '../../components/landing/landing.component';
import { DashboardComponent } from '../../components/dashboard/dashboard.component';
import { UserprofileComponent } from '../../components/userprofile/userprofile.component';
import { WrongRouteComponent } from '../../components/wrong-route/wrong-route.component';

const routes: Routes = [
  { path: '', component: LandingComponent},
  { path: '/dashboard', component: DashboardComponent},
  { path: '/userprofile', component: UserprofileComponent},

  //Wrong route
  { path: '404', component: WrongRouteComponent},

]; …

我正在尝试实现这里描述的技术：使用带有 webflux 的servlet 的 html5 模式。

简而言之，用户需要能够从浏览器刷新页面，而不会404从 Spring Boot重定向到白标签页面。

上面的教程依赖于使用 servletforward:机制的技术：

@Controller
public class ForwardController {

    @RequestMapping(value = "/**/{[path:[^\\.]*}")
    public String redirect() {
        // Forward to home page so that route is preserved.
        return "forward:/";
    }
} 

但是我使用webflux而不是servlets。这是我尝试使用的方法WebFilter：

@Component
public class SpaWebFilter implements WebFilter {

    @Override
    public Mono<Void> filter(ServerWebExchange exchange, WebFilterChain chain) {
        String path = exchange.getRequest().getURI().getPath();
        if (!path.startsWith("/api") && path.matches("[^\\\\.]*")) {
            return chain.filter(
                exchange.mutate().request(exchange.getRequest().mutate().path("/").build()
                ).build()); …