diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/hero.service.ts b/public/docs/_examples/cb-dependency-injection/ts/app/hero.service.ts index 9a7bdccd02..2063c30d7a 100644 --- a/public/docs/_examples/cb-dependency-injection/ts/app/hero.service.ts +++ b/public/docs/_examples/cb-dependency-injection/ts/app/hero.service.ts @@ -13,7 +13,7 @@ export class HeroService { ]; getHeroById(id: number): Hero { - return this.heroes.filter(hero => hero.id === id)[0]; + return this.heroes.find(hero => hero.id === id); } getAllHeroes(): Array { diff --git a/public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis.service.ts b/public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis.service.ts index 1200e8ac31..a847a15217 100644 --- a/public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis.service.ts +++ b/public/docs/_examples/router-deprecated/ts/app/crisis-center/crisis.service.ts @@ -21,7 +21,7 @@ export class CrisisService { getCrisis(id: number | string) { return crisesPromise - .then(crises => crises.filter(c => c.id === +id)[0]); + .then(crises => crises.find(c => c.id === +id)); } // #enddocregion diff --git a/public/docs/_examples/router-deprecated/ts/app/heroes/hero.service.ts b/public/docs/_examples/router-deprecated/ts/app/heroes/hero.service.ts index c2aec9807e..c819bd2632 100644 --- a/public/docs/_examples/router-deprecated/ts/app/heroes/hero.service.ts +++ b/public/docs/_examples/router-deprecated/ts/app/heroes/hero.service.ts @@ -22,6 +22,6 @@ export class HeroService { getHero(id: number | string) { return heroesPromise - .then(heroes => heroes.filter(h => h.id === +id)[0]); + .then(heroes => heroes.find(h => h.id === +id)); } } diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis.service.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis.service.ts index 20597752cc..b5d9e282c0 100644 --- a/public/docs/_examples/router/ts/app/crisis-center/crisis.service.ts +++ b/public/docs/_examples/router/ts/app/crisis-center/crisis.service.ts @@ -25,7 +25,7 @@ export class CrisisService { getCrisis(id: number | string) { return crisesPromise - .then(crises => crises.filter(c => c.id === +id)[0]); + .then(crises => crises.find(crisis => crisis.id === +id)); } // #enddocregion diff --git a/public/docs/_examples/router/ts/app/heroes/hero.service.ts b/public/docs/_examples/router/ts/app/heroes/hero.service.ts index c2aec9807e..6e4e7bee60 100644 --- a/public/docs/_examples/router/ts/app/heroes/hero.service.ts +++ b/public/docs/_examples/router/ts/app/heroes/hero.service.ts @@ -22,6 +22,6 @@ export class HeroService { getHero(id: number | string) { return heroesPromise - .then(heroes => heroes.filter(h => h.id === +id)[0]); + .then(heroes => heroes.find(hero => hero.id === +id)); } } diff --git a/public/docs/_examples/testing/ts/app/hero.service.ts b/public/docs/_examples/testing/ts/app/hero.service.ts index f83588934b..e9473e4038 100644 --- a/public/docs/_examples/testing/ts/app/hero.service.ts +++ b/public/docs/_examples/testing/ts/app/hero.service.ts @@ -20,7 +20,7 @@ export class HeroService { // #docregion get-hero getHero(id: number) { return Promise.resolve(HEROES).then( - heroes => heroes.filter(hero => hero.id === id)[0] + heroes => heroes.find(hero => hero.id === id) ); } // #enddocregion get-hero diff --git a/public/docs/_examples/toh-5/ts/app/hero.service.ts b/public/docs/_examples/toh-5/ts/app/hero.service.ts index c1cb8fa3e6..900d0da712 100644 --- a/public/docs/_examples/toh-5/ts/app/hero.service.ts +++ b/public/docs/_examples/toh-5/ts/app/hero.service.ts @@ -20,7 +20,7 @@ export class HeroService { // #docregion get-hero getHero(id: number) { return this.getHeroes() - .then(heroes => heroes.filter(hero => hero.id === id)[0]); + .then(heroes => heroes.find(hero => hero.id === id)); } // #enddocregion get-hero } diff --git a/public/docs/_examples/toh-6/ts/app/hero.service.ts b/public/docs/_examples/toh-6/ts/app/hero.service.ts index 8995a3dd96..a2344d84e6 100644 --- a/public/docs/_examples/toh-6/ts/app/hero.service.ts +++ b/public/docs/_examples/toh-6/ts/app/hero.service.ts @@ -33,7 +33,7 @@ export class HeroService { getHero(id: number) { return this.getHeroes() - .then(heroes => heroes.filter(hero => hero.id === id)[0]); + .then(heroes => heroes.find(hero => hero.id === id)); } // #docregion save diff --git a/public/docs/ts/latest/guide/router.jade b/public/docs/ts/latest/guide/router.jade index 43240b62b5..d5663797d4 100644 --- a/public/docs/ts/latest/guide/router.jade +++ b/public/docs/ts/latest/guide/router.jade @@ -1896,15 +1896,16 @@ code-example(format=""). 当用户点击了“Crisis Center”链接或者在地址栏粘贴`localhost:3000/crisis-center/`时,我们更希望该应用能直接显示危机列表。这就是默认路由。 - The preferred solution is to add a `redirect` route that transparently translates from the initial URL (`''`) to the preferred default path (`/crisis-center`): + The preferred solution is to add a `redirect` route that transparently translates from the initial relative URL (`''`) + to the desired default path (`/crisis-center`): - 首选的解决方案是添加一个`redirect`路由,它会透明的把初始URL(`''`)翻译成默认路径(`/crisis-center`)。 + 首选的解决方案是添加一个`redirect`路由,它会把初始的相对URL(`''`)悄悄翻译成默认路径(`/crisis-center`)。 +makeExample('router/ts/app/crisis-center/crisis-center.routes.2.ts', 'redirect', 'app/crisis-center/crisis-center.routes.ts (redirect route)' )(format='.') :marked A redirect route requires a `pathMatch` property to tell the router how to match a URL to the path of a route. - In this app, the router should select the route to `CrisisCenterComponent` when the *entire URL* matches `''`, + In this app, the router should select the route to the `CrisisListComponent` when the *entire URL* matches `''`, so we set the `pathMatch` value to `'full'`. 由于我们希望只有在路径明确的匹配到`''`时才重定向,所以我们往路由中添加了一个额外的配置项:`terminal: true`。 @@ -1913,12 +1914,22 @@ code-example(format=""). .l-sub-section :marked + Technically, `pathMatch = 'full'` results in a route hit when the *remaining*, unmatched segments of the URL match `''`. + In our example, the redirect is at the top level of the route configuration tree so the *remaining* URL and the *entire* URL + are the same thing. + The other possible `pathMatch` value is `'prefix'` which tells the router - to match the redirect route to _any_ URL that _begins_ with the redirect route's _prefix_ path. + to match the redirect route when the *remaining* URL ***begins*** with the redirect route's _prefix_ path. - That's not what we want in our use case. The `''` prefix path matches _every_ URL. - We should redirect to the `CrisisCenterComponent` _only_ when the _entire_ url is `''` - (or the equivalent `'/'`). + That's not what we want to do here. If the `pathMatch` value were `'prefix'`, + _every_ URL would match `''`. + We could never navigate to `/crisis-center/1` because the redirect route would match first and + send us to the `CrisisListComponent`. + + We should redirect to the `CrisisListComponent` _only_ when the _entire (remaining)_ url is `''`. + + Learn more in Victor Savkin's blog + [post on redirects](http://victorsavkin.com/post/146722301646/angular-router-empty-paths-componentless-routes). We'll discuss redirects in more detail in a future update to this chapter.