更新RC5

Question

在RC1的新路由器中，无法再使用 useAsDefault 。而是现在通过

在app.component.ts中实现默认路由

  ngOnInit() {
    this.router.navigate(['/login']);
  }

如果我按浏览器上的重新加载按钮刷新页面，那么我当前的网页网址（例如http://localhost:3000/heroshell/heroes）将更改为http://localhost:3000/login，因为每次都是我点击重新加载按钮，它将通过app.component.ts

  ngOnInit() {
    this.router.navigate(['/login']);
  }

我的当前页面仍会显示，但出现错误。

browser_adapter.ts:78 EXCEPTION: Error in app/apps/hero/hero-shell.component.html:3:7
browser_adapter.ts:78 ORIGINAL EXCEPTION: TypeError: Cannot read property 'map' of null

这是app / apps / hero / hero-shell.component.html

<my-app1>
<h1>{{title}}</h1>
<nav>
    <a [routerLink]="['dashboard']">Dashboard</a>
    <a [routerLink]="['heroes']">Heroes</a>
</nav>
<router-outlet></router-outlet>
</my-app1>

所以我的问题是

什么是＆＃34;属性＆＃39; map＆＃39; of null＆＃34;被称为？
有没有办法在不经过ngOnInit（）的情况下制作默认路线？
或者如何在页面重新加载期间解决此URL和页面内容不一致的问题？

Beta路由没有这种行为，因为不需要通过ngOnInit（）来定义默认路由。

有关我的文件夹结构和路线设置的更多信息，请参阅Angular2 RC1 child routes defined but not recognized

更新：如果我使用

  { path: '/', component: Login },

与

  ngOnInit() {
    this.router.navigate(['/']);
  }

然后，当重新加载按钮被击中且错误保持不变时，URL将更改为http://localhost:3000/。

同样，如果我将路径更改为＆＃39; ＆＃39;使用上述更新，然后点击重新加载按钮时，网址将更改为＆＃39; http://localhost:3000/ ＆＃39;并且错误保持不变。

解决问题的关键是使用两件事的组合：

使用＆＃39; /＆＃39;定义根路径或＆＃39; *＆＃39;在app.component.ts中的@Routes

{路径：＆＃39; *＆＃39;，组件：登录}，
在app.component.ts中删除ngOnInit()，以便它不会更改网址。

再次感谢大家的投入。欢呼:)

Answer 1

在RC1中对我有用的是

{ path: '', component: FooComponent, index: true } { path: 'foo', component: FooComponent }

Answer 2

对不起，我不明白第一和第三个问题，但为此：

有没有办法在不经过ngOnInit（）的情况下制作默认路线？

您是否尝试过'*'作为默认路线？

{ path: '/heroshell', component: HeroShellComponent },
{ path: '/home',  component: HomeComponent },
{ path: '/login', component: Login }, 
{ path: '*', component: Login },

默认路由为'Login'，'/ login'路径也可以。

Answer 3

@Routes([

   { path: '/', component: HomeComponent },

   { path: '/about', component: AboutComponent }
])

在这两个组件中，Homecomponent将是默认组件。

更新RC5

使用RC5，你的路径中不能有'/'。而是使用''或使用'*'

Answer 4

使用新RC路由器定义默认路由的一种方法是

@Routes([
    { path: '/',  component: Login }
])

Answer 5

@NgModule({
    imports: [
        RouterModule.forRoot([
            { path: 'login', component: LoginComponent },
            { path: '', component: LoginComponent },/*default*/
            { path: '**', component: PageNotFoundComponent }/*matches all*/
        ])
    ],
    exports: [
        RouterModule
    ]
})

第二条路径中的空路径与每个路由级别的默认路径相匹配。它还允许在不扩展URL路径的情况下添加路由。

最后一条路线中的**表示我们路线的通配路径。如果请求的URL与我们配置中定义的路由的任何路径不匹配，路由器将匹配此路由。这对于显示404页面或重定向到另一个路径非常有用。

配置中的路由顺序很重要，这是设计的。路由器在匹配路由时使用第一匹配胜利策略，因此应将更具体的路由放置在不太具体的路由之上。 https://angular.io/docs/ts/latest/guide/router.html

刷新页面

5 个答案:

更新RC5