![\"\"](\"https:\/\/www.webcyou.com\/wp-content\/uploads\/2016\/12\/angular_routing.png\")
<\/p>\n<\/p>\n
\u3053\u3061\u3089\u306e\u30da\u30fc\u30b8\u306f\u3001\u4ee5\u4e0b\u306e\u30da\u30fc\u30b8\u306e\u7c21\u5358\u306a\u548c\u8a33\u3067\u3059\u3002<\/p>\n
Angular2 tutorial | ROUTING<\/a><\/p>\n \u524d\u56de<\/strong> \u305d\u306e\u4ed6<\/strong><\/p>\n Angular2\u306e\u59cb\u3081\u65b9\u3002Angular2 \u516c\u5f0f\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb \u2013 Multiple Components\uff08\u7c21\u5358\u306a\u548c\u8a33\uff09<\/a><\/p>\n Angular2\u306e\u59cb\u3081\u65b9\u3002Angular2 \u516c\u5f0f\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb \u2013 Master\/Detail\uff08\u7c21\u5358\u306a\u548c\u8a33\uff09<\/a><\/p>\n Angular2\u306e\u59cb\u3081\u65b9\u3002Angular2 \u516c\u5f0f\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb \u2013 SETUP FOR LOCAL DEVELOPMENT\uff08\u7c21\u5358\u306a\u548c\u8a33\uff09Angular2\u306e\u59cb\u3081\u65b9\u3002Angular2 \u516c\u5f0f\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb \u2013 Introduction\uff08\u7c21\u5358\u306a\u548c\u8a33\uff09<\/a><\/p>\n Angular2\u306e\u59cb\u3081\u65b9\u3002Angular2 \u516c\u5f0f\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb \u2013 The Hero Editor\uff08\u7c21\u5358\u306a\u548c\u8a33\uff09<\/a><\/p>\n \u30d2\u30fc\u30ed\u30fc\u30ba\u30c4\u30a2\u30fc\u306e\u65b0\u3057\u3044\u8981\u4ef6\u304c\u3042\u308a\u307e\u3059\uff1a<\/p>\n \u30fb \u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9\u30d3\u30e5\u30fc\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n \u30fb Heroes\u30d3\u30e5\u30fc\u3068Dashboard\u30d3\u30e5\u30fc\u306e\u9593\u3092\u30ca\u30d3\u30b2\u30fc\u30c8\u3059\u308b\u6a5f\u80fd\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n \u30fb \u3044\u305a\u308c\u304b\u306e\u30d3\u30e5\u30fc\u3067\u30e6\u30fc\u30b6\u30fc\u304c\u30d2\u30fc\u30ed\u30fc\u540d\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u3001\u9078\u629e\u3057\u305f\u30d2\u30fc\u30ed\u30fc\u306e\u8a73\u7d30\u30d3\u30e5\u30fc\u306b\u79fb\u52d5\u3057\u307e\u3059\u3002<\/p>\n \u30fb \u30e6\u30fc\u30b6\u30fc\u304c\u96fb\u5b50\u30e1\u30fc\u30eb\u306e\u30c7\u30a3\u30fc\u30d7\u30ea\u30f3\u30af\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u3001\u7279\u5b9a\u306e\u30d2\u30fc\u30ed\u30fc\u306e\u8a73\u7d30\u30d3\u30e5\u30fc\u304c\u958b\u304d\u307e\u3059\u3002<\/p>\n \u5b8c\u4e86\u3057\u305f\u3089\u3001\u30e6\u30fc\u30b6\u30fc\u306f\u6b21\u306e\u3088\u3046\u306b\u30a2\u30d7\u30ea\u3092\u30ca\u30d3\u30b2\u30fc\u30c8\u3067\u304d\u307e\u3059\u3002<\/p>\n \u3053\u308c\u3089\u306e\u8981\u4ef6\u3092\u6e80\u305f\u3059\u305f\u3081\u306b\u3001\u30a2\u30d7\u30ea\u306bAngular\u306e\u30eb\u30fc\u30bf\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n “““ \u3053\u306e\u30da\u30fc\u30b8\u304c\u7d42\u4e86\u3057\u305f\u3089\u3001\u30a2\u30d7\u30ea\u306f\u3001live example<\/a> \/ downloadable example.<\/a> \u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n “““ \u30d2\u30fc\u30ed\u30fc\u30c4\u30a2\u30fc\u306b\u9032\u3080\u524d\u306b\u3001\u4ee5\u4e0b\u306e\u69cb\u9020\u3092\u6301\u3063\u3066\u3044\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n \u6b21\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5165\u529b\u3057\u307e\u3059\u3002<\/p>\n \u3053\u306e\u30b3\u30de\u30f3\u30c9\u306f\u3001”watch mode”\u3067\u3001TypeScript\u30b3\u30f3\u30d1\u30a4\u30e9\u3092\u5b9f\u884c\u3057\u3001\u30b3\u30fc\u30c9\u304c\u5909\u66f4\u3055\u308c\u305f\u3068\u304d\u306b\u81ea\u52d5\u7684\u306b\u518d\u30b3\u30f3\u30d1\u30a4\u30eb\u3057\u307e\u3059\u3002<\/p>\n \u3053\u306e\u30b3\u30de\u30f3\u30c9\u306f\u3001\u30d6\u30e9\u30a6\u30b6\u3067\u30a2\u30d7\u30ea\u3092\u540c\u6642\u306b\u8d77\u52d5\u3057\u3001\u30b3\u30fc\u30c9\u304c\u5909\u66f4\u3055\u308c\u305f\u3068\u304d\u306b\u30d6\u30e9\u30a6\u30b6\u3092\u66f4\u65b0\u3057\u307e\u3059\u3002<\/p>\n \u30d6\u30e9\u30a6\u30b6\u3092\u518d\u30b3\u30f3\u30d1\u30a4\u30eb\u307e\u305f\u306f\u66f4\u65b0\u3059\u308b\u305f\u3081\u306b\u4e00\u6642\u505c\u6b62\u3059\u308b\u3053\u3068\u306a\u304f\u3001\u30d2\u30fc\u30ed\u30fc\u306e\u30c4\u30a2\u30fc\u3092\u69cb\u7bc9\u3057\u7d9a\u3051\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n \u8a08\u753b\u306f\u6b21\u306e\u901a\u308a\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n \u30fb AppComponent<\/strong>\u3092\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u306e\u307f\u3092\u51e6\u7406\u3059\u308b\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u30b7\u30a7\u30eb\u306b\u5909\u63db\u3057\u307e\u3059\u3002<\/p>\n \u30fb \u73fe\u5728\u306eAppComponent<\/strong>\u5185\u306eHeroes<\/strong>\u306e\u61f8\u5ff5\u4e8b\u9805\u3092\u3001\u5225\u306eHeroesComponent<\/strong>\u306b\u518d\u914d\u7f6e\u3057\u307e\u3059\u3002<\/p>\n \u30fb \u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n \u30fb \u65b0\u3057\u3044DashboardComponent<\/strong>\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n \u30fb \u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9\u3092\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u69cb\u9020\u306b\u7d50\u3073\u4ed8\u3051\u307e\u3059\u3002<\/p>\n “““ \u73fe\u5728\u306eApp\u306f\u3001AppComponent<\/strong>\u3092\u30ed\u30fc\u30c9\u3057\u3001\u3059\u3050\u306b\u30d2\u30fc\u30ed\u30fc\u306e\u30ea\u30b9\u30c8\u3092\u8868\u793a\u3057\u307e\u3059\u3002<\/p>\n \u4fee\u6b63\u3055\u308c\u305f\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306f\u3001\u30d3\u30e5\u30fc\u306e\u9078\u629e\u80a2\u3092\u6301\u3064\u30b7\u30a7\u30eb\uff08\u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9\u3068\u30d2\u30fc\u30ed\u30fc\u30ba\uff09\u3092\u8868\u793a\u3057\u3001\u305d\u306e\u3046\u3061\u306e1\u3064\u306b\u30c7\u30d5\u30a9\u30eb\u30c8\u3092\u8a2d\u5b9a\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n AppComponent<\/strong>\u306f\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u306e\u307f\u3092\u51e6\u7406\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n \u305d\u306e\u305f\u3081\u3001Hero\u306e\u8868\u793a\u3092AppComponent<\/strong>\u304b\u3089HeroesComponent<\/strong>\u306b\u79fb\u52d5\u3057\u307e\u3059<\/p>\n AppComponent\u306f\u3059\u3067\u306bHeroes\u5c02\u7528\u3067\u3059\u3002 <\/p>\n AppComponent\u304b\u3089\u30b3\u30fc\u30c9\u3092\u79fb\u52d5\u3059\u308b\u4ee3\u308f\u308a\u306b\u3001HeroesComponent<\/strong>\u306e\u540d\u524d\u3092\u5909\u66f4\u3057\u3001\u5225\u306eAppComponent\u30b7\u30a7\u30eb\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n \u6b21\u306e\u64cd\u4f5c\u3092\u884c\u3044\u307e\u3059\u3002<\/p>\n \u30fb app.component.ts<\/strong>\u30d5\u30a1\u30a4\u30eb\u306e\u540d\u524d\u3092heroes.component.ts<\/strong>\u306b\u5909\u66f4\u3057\u307e\u3059\u3002<\/p>\n \u30fb AppComponent<\/strong>\u30af\u30e9\u30b9\u306e\u540d\u524d\u3092HeroesComponent<\/strong>\u306b\u5909\u66f4\u3057\u307e\u3059\uff08\u3053\u306e\u30d5\u30a1\u30a4\u30eb\u5185\u3067\u306e\u307f\u30ed\u30fc\u30ab\u30eb\u306b\u540d\u524d\u3092\u5909\u66f4\u3057\u307e\u3059\uff09\u3002<\/p>\n \u30fb \u30bb\u30ec\u30af\u30bfmy-app<\/strong>\u306e\u540d\u524d\u3092\u3001my-heroes<\/strong>\u306b\u5909\u66f4\u3057\u307e\u3059\u3002<\/p>\n src\/app\/heroes.component.ts (showing renamings only)<\/strong><\/p>\n \u65b0\u3057\u3044 AppComponent<\/strong>\u306f\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u30b7\u30a7\u30eb\u3067\u3059\u3002<\/p>\n \u30e6\u30fc\u30b6\u30fc\u304c\u30ca\u30d3\u30b2\u30fc\u30c8\u3059\u308b\u30da\u30fc\u30b8\u306e\u4e0a\u90e8\u306b\u306f\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u30ea\u30f3\u30af\u304c\u3001\u4e0b\u90e8\u306b\u306f\u8868\u793a\u9818\u57df\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n \u6b21\u306e\u624b\u9806\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002<\/p>\n \u6700\u521d\u306e\u30c9\u30e9\u30d5\u30c8\u306f\u6b21\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n src\/app\/app.components.ts(v1)<\/strong><\/p>\n src\/app\/app.module.ts(v1)<\/strong><\/p>\n \u30a2\u30d7\u30ea\u306f\u307e\u3060\u5b9f\u884c\u3055\u308c\u3001\u82f1\u96c4\u3092\u8868\u793a\u3057\u307e\u3059\u3002<\/p>\n \u81ea\u52d5\u7684\u306b\u8868\u793a\u3059\u308b\u306e\u3067\u306f\u306a\u304f\u3001\u30e6\u30fc\u30b6\u30fc\u304c\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u5f8c\u306b\u30d2\u30fc\u30ed\u30fc\u304c\u8868\u793a\u3055\u308c\u308b\u306f\u305a\u3067\u3059\u3002<\/p>\n \u8a00\u3044\u63db\u3048\u308c\u3070\u3001\u30e6\u30fc\u30b6\u30fc\u306f\u30d2\u30fc\u30ed\u30fc\u306e\u30ea\u30b9\u30c8\u306b\u30ca\u30d3\u30b2\u30fc\u30c8\u3067\u304d\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n \u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u3092\u6709\u52b9\u306b\u3059\u308b\u306b\u306f\u3001Angular router<\/strong>\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n Angular router<\/strong>\u306f\u3001RouterModule<\/strong>\u3068\u547c\u3070\u308c\u308b\u5916\u90e8\u306e\u30aa\u30d7\u30b7\u30e7\u30f3\u306eAngular NgModule<\/strong>\u3067\u3059\u3002<\/p>\n \u30eb\u30fc\u30bf\u306f\u3001\u8907\u6570\u306e\u63d0\u4f9b\u30b5\u30fc\u30d3\u30b9\uff08RouterModule<\/strong>\uff09\u3001\u8907\u6570\u306e\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\uff08RouterOutlet<\/strong>\u3001RouterLink<\/strong>\u3001RouterLinkActive<\/strong>\uff09\u3068\u69cb\u6210\uff08Routes<\/strong>\uff09\u306e\u7d44\u307f\u5408\u308f\u305b\u3067\u3059\u3002<\/p>\n \u6700\u521d\u306b\u7d4c\u8def\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n index.html\u3092\u958b\u304d\u3001<head>\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u4e0a\u90e8\u306b<base href = “…”>\u8981\u7d20\uff08\u307e\u305f\u306f\u3053\u306e\u8981\u7d20\u3092\u52d5\u7684\u306b\u8a2d\u5b9a\u3059\u308b\u30b9\u30af\u30ea\u30d7\u30c8\uff09\u304c\u3042\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002<\/p>\n src\/index.html (base-href)<\/strong><\/p>\n BASE HREF IS ESSENTIAL<\/strong><\/p>\n “““ \u30a2\u30d7\u30ea\u30eb\u30fc\u30c8\u306e\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n \u30eb\u30fc\u30c8\u306f\u3001\u30e6\u30fc\u30b6\u30fc\u304c\u30ea\u30f3\u30af\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u304b\u3001URL\u3092\u30d6\u30e9\u30a6\u30b6\u306e\u30a2\u30c9\u30ec\u30b9\u30d0\u30fc\u306b\u8cbc\u308a\u4ed8\u3051\u308b\u3068\u304d\u306b\u8868\u793a\u3059\u308b\u30d3\u30e5\u30fc\u3092\u30eb\u30fc\u30bf\u30fc\u306b\u6307\u793a\u3057\u307e\u3059\u3002<\/p>\n \u6700\u521d\u306e\u30eb\u30fc\u30c8\u3092\u3001\u30d2\u30fc\u30ed\u30fc\u30ba\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3078\u306e\u30eb\u30fc\u30c8\u3068\u3057\u3066\u5b9a\u7fa9\u3057\u307e\u3059\u3002<\/p>\n src\/app\/app.module.ts (heroes route)<\/strong><\/p>\n \u30eb\u30fc\u30c8\u306f\u3001\u30eb\u30fc\u30c8\u5b9a\u7fa9\u306e\u914d\u5217\u3067\u3059\u3002<\/p>\n \u3053\u306e\u30eb\u30fc\u30c8\u5b9a\u7fa9\u306b\u306f\u3001\u6b21\u306e\u90e8\u5206\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n \u30fb \u30d1\u30b9\uff1a \u30eb\u30fc\u30bf\u306f\u3001\u30d6\u30e9\u30a6\u30b6\u306e\u30a2\u30c9\u30ec\u30b9\u30d0\u30fc\uff08\u30d2\u30fc\u30ed\u30fc\uff09\u306eURL\u3078\u306e\u3053\u306e\u30eb\u30fc\u30c8\u306e\u30d1\u30b9\u3092\u7167\u5408\u3057\u307e\u3059\u3002<\/p>\n \u30fb \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\uff1a \u3053\u306e\u30eb\u30fc\u30c8\uff08HeroesComponent<\/strong>\uff09\u306b\u30ca\u30d3\u30b2\u30fc\u30c8\u3059\u308b\u969b\u306b\u30eb\u30fc\u30bf\u304c\u4f5c\u6210\u3059\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3002<\/p>\n “““ RouterModule<\/strong>\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u3001AppModule imports<\/strong>\u914d\u5217\u306b\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n src\/app\/app.module.ts (app routing)<\/strong><\/p>\n “““ forRoot\uff08\uff09\u30e1\u30bd\u30c3\u30c9\u306f\u3001\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u306b\u5fc5\u8981\u306a\u30eb\u30fc\u30bf\u30b5\u30fc\u30d3\u30b9\u30d7\u30ed\u30d0\u30a4\u30c0\u3068\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u3092\u63d0\u4f9b\u3057\u3001\u73fe\u5728\u306e\u30d6\u30e9\u30a6\u30b6\u306eURL\u306b\u57fa\u200b\u200b\u3065\u3044\u3066\u521d\u671f\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002 \u30d1\u30b9\u306e\/ heroes\u3092URL\u306e\u6700\u5f8c\u306b\u3042\u308b\u30d6\u30e9\u30a6\u30b6\u306e\u30a2\u30c9\u30ec\u30b9\u30d0\u30fc\u306b\u8cbc\u308a\u4ed8\u3051\u308b\u3068\u3001\u30eb\u30fc\u30bf\u306f\u305d\u308c\u3092\u30d2\u30fc\u30ed\u30fc\u30eb\u30fc\u30c8\u306b\u4e00\u81f4\u3055\u305b\u3001HeroesComponent<\/strong>\u3092\u8868\u793a\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n \u305f\u3060\u3057\u3001\u30eb\u30fc\u30bf\u306b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u8868\u793a\u5148\u3092\u4f1d\u3048\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n \u3053\u308c\u3092\u884c\u3046\u306b\u306f\u3001\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306e\u6700\u5f8c\u306b<router-outlet>\u8981\u7d20\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002 <\/p>\n RouterOutlet<\/strong>\u306f\u3001RouterModule<\/strong>\u306b\u3088\u3063\u3066\u63d0\u4f9b\u3055\u308c\u308b\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u306e1\u3064\u3067\u3059\u3002<\/p>\n \u30e6\u30fc\u30b6\u30fc\u304c\u30a2\u30d7\u30ea\u3092\u30ca\u30d3\u30b2\u30fc\u30c8\u3059\u308b\u3068\u3001\u30eb\u30fc\u30bf\u306f<router-outlet>\u306e\u3059\u3050\u4e0b\u306b\u3042\u308b\u5404\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u8868\u793a\u3057\u307e\u3059\u3002<\/p>\n \u30e6\u30fc\u30b6\u30fc\u306f\u3001\u30a2\u30c9\u30ec\u30b9\u30d0\u30fc\u306b\u30eb\u30fc\u30c8URL\u3092\u8cbc\u308a\u4ed8\u3051\u308b\u5fc5\u8981\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n \u4ee3\u308f\u308a\u306b\u3001\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306b\u30a2\u30f3\u30ab\u30fc\u30bf\u30b0\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u3001HeroesComponent<\/strong>\u3078\u306e\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u304c\u30c8\u30ea\u30ac\u30fc\u3055\u308c\u307e\u3059\u3002<\/p>\n \u6539\u8a02\u3055\u308c\u305f\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306f\u6b21\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n src\/app\/app.component.ts (template-v2)<\/strong><\/p>\n \u30a2\u30f3\u30ab\u30fc\u30bf\u30b0\u5185\u306erouterLink<\/strong>\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u306b\u6ce8\u610f\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n RouterLink<\/strong>\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\uff08\u5225\u306eRouterModule<\/strong>\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\uff09\u306f\u3001\u30e6\u30fc\u30b6\u304c\u30ea\u30f3\u30af\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u3068\u304d\u306b\u3069\u3053\u3092\u30ca\u30d3\u30b2\u30fc\u30c8\u3059\u308b\u304b\u3092\u30eb\u30fc\u30bf\u306b\u901a\u77e5\u3059\u308b\u6587\u5b57\u5217\u306b\u30d0\u30a4\u30f3\u30c9\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n \u30ea\u30f3\u30af\u306f\u52d5\u7684\u3067\u306f\u306a\u3044\u306e\u3067\u3001\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u547d\u4ee4\u306f\u3001\u7d4c\u8def\u30d1\u30b9\u3078\u306e1\u56de\u306e\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u3067\u5b9a\u7fa9\u3055\u308c\u308b\u3002<\/p>\n \u30eb\u30fc\u30c8\u8a2d\u5b9a\u3092\u632f\u308a\u8fd4\u308b\u3068\u3001 ‘\/ heroes’\u304c\u3001HeroesComponent<\/strong>\u3078\u306e\u30eb\u30fc\u30c8\u306e\u30d1\u30b9\u3067\u3042\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002<\/p>\n \u30c0\u30a4\u30ca\u30df\u30c3\u30af\u30eb\u30fc\u30bf\u30ea\u30f3\u30af\u3068\u30ea\u30f3\u30af\u30d1\u30e9\u30e1\u30fc\u30bf\u914d\u5217\u306e\u8a73\u7d30\u306b\u3064\u3044\u3066\u306f\u3001Routing\uff06Navigation<\/a>\u30da\u30fc\u30b8\u306eAppendix\uff1aLink Parameters Array<\/a>\u30bb\u30af\u30b7\u30e7\u30f3\u3092\u53c2\u7167\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n \u30d6\u30e9\u30a6\u30b6\u3092\u66f4\u65b0\u3057\u307e\u3059\u3002<\/p>\n \u30d6\u30e9\u30a6\u30b6\u306b\u306f\u3001\u30a2\u30d7\u30ea\u306e\u30bf\u30a4\u30c8\u30eb\u3068\u30d2\u30fc\u30ed\u30fc\u306e\u30ea\u30f3\u30af\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u304c\u3001\u30d2\u30fc\u30ed\u30fc\u306e\u30ea\u30b9\u30c8\u306f\u8868\u793a\u3055\u308c\u307e\u305b\u3093\u3002<\/p>\n src\/app\/app.component.ts (v2)<\/strong><\/p>\n AppComponent<\/strong>\u306f\u30eb\u30fc\u30bf\u30fc\u306b\u63a5\u7d9a\u3055\u308c\u3001\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u3055\u308c\u305f\u30d3\u30e5\u30fc\u3092\u8868\u793a\u3057\u307e\u3059\u3002<\/p>\n \u3053\u306e\u305f\u3081\u3001\u3053\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30bf\u30a4\u30d7\u3092\u4ed6\u306e\u7a2e\u985e\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068\u533a\u5225\u3059\u308b\u305f\u3081\u306b\u3001\u3053\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30bf\u30a4\u30d7\u3092\u30eb\u30fc\u30bf\u30fc\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068\u547c\u3073\u307e\u3059\u3002<\/p>\n \u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u306f\u3001\u8907\u6570\u306e\u30d3\u30e5\u30fc\u304c\u5b58\u5728\u3059\u308b\u5834\u5408\u306b\u306e\u307f\u610f\u5473\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n \u5225\u306e\u30d3\u30e5\u30fc\u3092\u8ffd\u52a0\u3059\u308b\u306b\u306f\u3001\u30d7\u30ec\u30fc\u30b9\u30db\u30eb\u30c0 DashboardComponent<\/strong>\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n \u3053\u306e\u30d7\u30ec\u30fc\u30b9\u30db\u30eb\u30c0\u306f\u3001\u30e6\u30fc\u30b6\u30fc\u304c\u30ca\u30d3\u30b2\u30fc\u30c8\u3067\u304d\u308b\u5834\u6240\u3067\u3059\u3002<\/p>\n src\/app\/dashboard.component.ts (v1)<\/strong><\/p>\n \u5f8c\u3067\u3053\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u3088\u308a\u4fbf\u5229\u306b\u3059\u308b\u3067\u3057\u3087\u3046\u3002<\/p>\n \u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9\u306b\u30ca\u30d3\u30b2\u30fc\u30c8\u3059\u308b\u3088\u3046\u306b\u3001app.module.ts<\/strong>\u3092\u6559\u3048\u308b\u306b\u306f\u3001\u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u3001\u6b21\u306e\u30eb\u30fc\u30c8\u5b9a\u7fa9\u3092\u30eb\u30fc\u30c8\u5b9a\u7fa9\u914d\u5217\u306b\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n src\/app\/app.module.ts (Dashboard route)<\/strong><\/p>\n \u307e\u305f\u3001DashboardComponent<\/strong>\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u3066AppModule<\/strong>\u306e\u5ba3\u8a00\u306b\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n src\/app\/app.module.ts (dashboard)<\/strong><\/p>\n \u30a2\u30d7\u30ea\u304c\u8d77\u52d5\u3059\u308b\u3068\u3001\u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9\u304c\u8868\u793a\u3055\u308c\u3001\u30d6\u30e9\u30a6\u30b6\u306e\u30a2\u30c9\u30ec\u30b9\u30d0\u30fc\u306b\/\u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9\u306eURL\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n \u73fe\u5728\u3001\u30d6\u30e9\u30a6\u30b6\u306f\u30a2\u30c9\u30ec\u30b9\u30d0\u30fc\u306b\/\u3067\u8d77\u52d5\u3057\u307e\u3059\u3002<\/p>\n \u3053\u308c\u3092\u5b9f\u73fe\u3059\u308b\u306b\u306f\u3001\u30ea\u30c0\u30a4\u30ec\u30af\u30c8\u30eb\u30fc\u30c8\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n \u30eb\u30fc\u30c8\u5b9a\u7fa9\u306e\u914d\u5217\u306b\u4ee5\u4e0b\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n src\/app\/app.module.ts (redirect)<\/strong><\/p>\n “““ \u30d2\u30fc\u30ed\u30fc\u30ba\u30ea\u30f3\u30af\u306e\u3059\u3050\u4e0a\u306b\u3042\u308b\u3001\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3078\u306e\u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u30ea\u30f3\u30af\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n src\/app\/app.component.ts (template-v3)<\/strong><\/p>\n “““ \u30d6\u30e9\u30a6\u30b6\u3067\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u30eb\u30fc\u30c8\uff08\/\uff09\u306b\u79fb\u52d5\u3057\u3066\u30ea\u30ed\u30fc\u30c9\u3057\u307e\u3059\u3002<\/p>\n \u30a2\u30d7\u30ea\u306f\u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9\u3092\u8868\u793a\u3057\u3001\u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9\u3068\u30d2\u30fc\u30ed\u30fc\u306e\u9593\u3092\u30ca\u30d3\u30b2\u30fc\u30c8\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n \u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9\u3092\u3082\u3063\u3068\u9762\u767d\u304f\u3059\u308b\u305f\u3081\u306b\u3001\u4e0a\u4f4d4\u4eba\u306e\u30d2\u30fc\u30ed\u30fc\u3092\u4e00\u76ee\u3067\u8868\u793a\u3057\u307e\u3059\u3002<\/p>\n \u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306e\u30e1\u30bf\u30c7\u30fc\u30bf\u3092\u65b0\u3057\u3044\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u30d5\u30a1\u30a4\u30eb\u3092\u6307\u3059templateUrl\u30d7\u30ed\u30d1\u30c6\u30a3\u306b\u7f6e\u304d\u63db\u3048\u307e\u3059\u3002<\/p>\n src\/app\/dashboard.component.ts (metadata)<\/strong><\/p>\n \u3053\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u542b\u3080\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n src\/app\/dashboard.component.html<\/strong><\/p>\n * ngFor\u306f\u518d\u3073\u30d2\u30fc\u30ed\u30fc\u306e\u30ea\u30b9\u30c8\u3092\u53cd\u5fa9\u3057\u3066\u305d\u306e\u540d\u524d\u3092\u8868\u793a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002\u4f59\u5206\u306a<div>\u8981\u7d20\u306f\u5f8c\u3067\u30b9\u30bf\u30a4\u30ea\u30f3\u30b0\u306b\u5f79\u7acb\u3061\u307e\u3059\u3002<\/p>\n \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30d2\u30fc\u30ed\u30fc\u914d\u5217\u3092\u8aad\u307f\u8fbc\u3080\u306b\u306f\u3001HeroService<\/strong>\u3092\u518d\u5229\u7528\u3067\u304d\u307e\u3059\u3002<\/p>\n \u4ee5\u524d\u306f\u3001HeroService<\/strong>\u3092HeroesComponent<\/strong>\u306e\u30d7\u30ed\u30d0\u30a4\u30c0\u914d\u5217\u304b\u3089\u524a\u9664\u3057\u3001\u305d\u308c\u3092AppModule<\/strong>\u306e\u30d7\u30ed\u30d0\u30a4\u30c0\u914d\u5217\u306b\u8ffd\u52a0\u3057\u307e\u3057\u305f\u3002<\/p>\n \u3053\u306e\u52d5\u304d\u306b\u3088\u308a\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u3059\u3079\u3066\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u4f7f\u7528\u53ef\u80fd\u306a\u3001\u30b7\u30f3\u30b0\u30eb\u30c8\u30f3\u306eHeroService<\/strong>\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u304c\u4f5c\u6210\u3055\u308c\u307e\u3057\u305f\u3002 <\/p>\n Angular\u306fHeroService<\/strong>\u3092\u6ce8\u5165\u3057\u3001DashboardComponent<\/strong>\u3067\u4f7f\u7528\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n dashboard.component.ts<\/strong>\u306b\u3001\u6b21\u306eimport\u6587\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n src\/app\/dashboard.component.ts (imports)<\/strong><\/p>\n \u6b21\u306e\u3088\u3046\u306b\u3001DashboardComponent<\/strong>\u30af\u30e9\u30b9\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n src\/app\/dashboard.component.ts (class)<\/strong><\/p>\n \u3053\u306e\u7a2e\u306e\u30ed\u30b8\u30c3\u30af\u306f\u3001HeroesComponent<\/strong>\u3067\u3082\u4f7f\u7528\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n \u30fb \u30d2\u30fc\u30ed\u30fc\u914d\u5217\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002<\/p>\n \u30fb \u30b3\u30f3\u30b9\u30c8\u30e9\u30af\u30bf\u306bHeroService<\/strong>\u3092\u633f\u5165\u3057\u3001\u305d\u308c\u3092\u30d7\u30e9\u30a4\u30d9\u30fc\u30c8\u306aheroService<\/strong>\u30d5\u30a3\u30fc\u30eb\u30c9\u306b\u4fdd\u6301\u3057\u307e\u3059\u3002<\/p>\n \u30fb \u30b5\u30fc\u30d3\u30b9\u3092\u547c\u3073\u51fa\u3057\u3066\u3001Angular ngOnInit<\/strong>\u30e9\u30a4\u30d5\u30b5\u30a4\u30af\u30eb\u30d5\u30c3\u30af\u306e\u4e2d\u306e\u30d2\u30fc\u30ed\u30fc\u3092\u53d6\u5f97\u3057\u307e\u3059\u3002<\/p>\n \u3053\u306e\u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9\u3067\u306f\u3001Array.slice\u30e1\u30bd\u30c3\u30c9\u30674\u3064\u306e\u30d2\u30fc\u30ed\u30fc\uff082\u4f4d\u30013\u4f4d\u30014\u4f4d\u30015\u4f4d\uff09\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002<\/p>\n \u30d6\u30e9\u30a6\u30b6\u3092\u66f4\u65b0\u3057\u3066\u3001\u65b0\u3057\u3044\u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9\u306b4\u3064\u306e\u30d2\u30fc\u30ed\u30fc\u540d\u3092\u8868\u793a\u3057\u307e\u3059\u3002<\/p>\n \u9078\u629e\u3055\u308c\u305f\u30d2\u30fc\u30ed\u30fc\u306e\u8a73\u7d30\u304c\u3001HeroesComponent<\/strong>\u306e\u4e0b\u90e8\u306b\u8868\u793a\u3055\u308c\u307e\u3059\u304c\u3001\u30e6\u30fc\u30b6\u30fc\u306f\u6b21\u306e\u8ffd\u52a0\u306e\u65b9\u6cd5\u3067HeroDetailComponent<\/strong>\u306b\u30ca\u30d3\u30b2\u30fc\u30c8\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n \u30fb \u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9\u304b\u3089\u9078\u629e\u3055\u308c\u305f\u30d2\u30fc\u30ed\u30fc\u307e\u3067\u3002<\/p>\n \u30fb \u30d2\u30fc\u30ed\u30fc\u30ea\u30b9\u30c8\u304b\u3089\u9078\u3070\u308c\u305f\u30d2\u30fc\u30ed\u30fc\u307e\u3067\u3002<\/p>\n \u30fb \u30d6\u30e9\u30a6\u30b6\u306e\u30a2\u30c9\u30ec\u30b9\u30d0\u30fc\u306b\u8cbc\u308a\u4ed8\u3051\u3089\u308c\u305f”deep link”URL\u304b\u3089\u3002<\/p>\n app.module.ts<\/strong>\u5185\u306e HeroDetailComponent<\/strong>\u3078\u306e\u30eb\u30fc\u30c8\u3092\u8ffd\u52a0\u3067\u304d\u307e\u3059\u3002<\/p>\n \u4ed6\u306e\u30eb\u30fc\u30c8\u304c\u8a2d\u5b9a\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n HeroDetailComponent<\/strong>\u306b\u3001\u3069\u306e\u30d2\u30fc\u30ed\u30fc\u3092\u8868\u793a\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u304b\u3068\u3044\u3046\u70b9\u3067\u3001\u65b0\u3057\u3044\u30eb\u30fc\u30c8\u306f\u73cd\u3057\u3044\u3067\u3059\u3002<\/p>\n \u3042\u306a\u305f\u306f\u3001HeroesComponent<\/strong>\u307e\u305f\u306f\u3001DashboardComponent<\/strong>\u306b\u4f55\u3082\u8a00\u308f\u305b\u308b\u5fc5\u8981\u306f\u3042\u308a\u307e\u305b\u3093\u3067\u3057\u305f\u3002<\/p>\n \u73fe\u5728\u3001\u89aa\u306eHeroesComponent<\/strong>\u306f\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306ehero\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u6b21\u306e\u3088\u3046\u306a\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u3092\u6301\u3064hero\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306b\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n \u3057\u304b\u3057\u3001\u3053\u306e\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u306f\u3069\u306e\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u30b7\u30ca\u30ea\u30aa\u3067\u3082\u6a5f\u80fd\u3057\u307e\u305b\u3093\u3002<\/p>\n \u30d2\u30fc\u30ed\u30fc\u306eID\u3092URL\u306b\u8ffd\u52a0\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002 id\u304c11\u306e\u30d2\u30fc\u30ed\u30fc\u306b\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u3059\u308b\u3068\u3001\u6b21\u306e\u3088\u3046\u306aURL\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n URL\u306e\/ detail \/\u90e8\u5206\u306f\u5b9a\u6570\u3067\u3059\u3002\u672b\u5c3e\u306e\u6570\u5024\u306f\u82f1\u96c4\u304b\u3089\u82f1\u96c4\u306b\u5909\u308f\u308a\u307e\u3059\u3002<\/p>\n \u30d2\u30fc\u30ed\u30fc\u306eID\u3092\u8868\u3059\u30d1\u30e9\u30e1\u30fc\u30bf\uff08\u307e\u305f\u306f\u30c8\u30fc\u30af\u30f3\uff09\u3092\u4f7f\u7528\u3057\u3066\u3001\u30eb\u30fc\u30c8\u306e\u53ef\u5909\u90e8\u5206\u3092\u8868\u73fe\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n \u6b21\u306e\u30eb\u30fc\u30c8\u5b9a\u7fa9\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n src\/app\/app.module.ts (hero detail)<\/strong><\/p>\n \u30d1\u30b9\u306e\u30b3\u30ed\u30f3\uff08:)\u306f\u3001\u6b21\u306e\u3053\u3068\u3092\u793a\u3057\u307e\u3059\u3002<\/p>\n id\u306f\u3001HeroDetailComponent<\/strong>\u306b\u30ca\u30d3\u30b2\u30fc\u30c8\u3059\u308b\u3068\u304d\u306b\u3001\u7279\u5b9a\u306e\u30d2\u30fc\u30ed\u30fcID\u306e\u30d7\u30ec\u30fc\u30b9\u30db\u30eb\u30c0\u3067\u3059\u3002<\/p>\n \u3042\u306a\u305f\u306f\u30a2\u30d7\u30ea\u306e\u30eb\u30fc\u30c8\u3092\u7d42\u3048\u307e\u3057\u305f\u3002<\/p>\n \u7279\u5b9a\u306e\u30d2\u30fc\u30ed\u30fc\u3092\u8868\u793a\u3059\u308b\u305f\u3081\u306b\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u30ea\u30f3\u30af\u3092\u30af\u30ea\u30c3\u30af\u3057\u306a\u3044\u305f\u3081\u3001\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306b’Hero Detail’\u30ea\u30f3\u30af\u3092\u8ffd\u52a0\u3057\u307e\u305b\u3093\u3067\u3057\u305f\u3002<\/p>\n \u540d\u524d\u304c\u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9\u306b\u8868\u793a\u3055\u308c\u308b\u304b\u82f1\u96c4\u30ea\u30b9\u30c8\u306b\u8868\u793a\u3055\u308c\u308b\u304b\u306b\u304b\u304b\u308f\u3089\u305a\u3001\u30d2\u30fc\u30ed\u30fc\u540d\u304c\u30af\u30ea\u30c3\u30af\u3055\u308c\u307e\u3059\u3002<\/p>\n HeroDetailComponent<\/strong>\u304c\u6539\u8a02\u3055\u308c\u3001\u30ca\u30d3\u30b2\u30fc\u30c8\u3067\u304d\u308b\u72b6\u614b\u306b\u306a\u308b\u307e\u3067\u3001\u30d2\u30fc\u30ed\u30fc\u306e\u30af\u30ea\u30c3\u30af\u3092\u8ffd\u52a0\u3059\u308b\u5fc5\u8981\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n HeroDetailComponent<\/strong>\u306e\u5b9f\u88c5\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n src\/app\/hero-detail.component.ts (current)<\/strong><\/p>\n \u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306f\u5909\u66f4\u3055\u308c\u307e\u305b\u3093\u3002<\/p>\n \u30d2\u30fc\u30ed\u30fc\u306e\u540d\u524d\u3082\u540c\u3058\u3088\u3046\u306b\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n \u5927\u304d\u306a\u5909\u5316\u306f\u3001\u3042\u306a\u305f\u304c\u82f1\u96c4\u306e\u540d\u524d\u3092\u5f97\u308b\u65b9\u6cd5\u306b\u3088\u3063\u3066\u5f15\u304d\u8d77\u3053\u3055\u308c\u307e\u3059\u3002<\/p>\n \u3042\u306a\u305f\u306f\u3082\u306f\u3084\u89aa\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u3067\u4e3b\u4eba\u516c\u3092\u53d7\u3051\u53d6\u308b\u3053\u3068\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n \u65b0\u3057\u3044HeroDetailComponent<\/strong>\u306f\u3001ActivatedRoute<\/strong>\u30b5\u30fc\u30d3\u30b9\u306eObservable<\/strong>\u30d1\u30e9\u30e1\u30fc\u30bf\u304b\u3089id\u30d1\u30e9\u30e1\u30fc\u30bf\u3092\u53d6\u5f97\u3057\u3001HeroService<\/strong>\u3092\u4f7f\u7528\u3057\u3066\u305d\u306eID\u3092\u6301\u3064\u30d2\u30fc\u30ed\u30fc\u3092\u53d6\u5f97\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n \u6b21\u306e\u30a4\u30f3\u30dd\u30fc\u30c8\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n src\/app\/hero-detail.component (added-imports)<\/strong><\/p>\n ActivatedRoute\u3001HeroService\u3001\u304a\u3088\u3073Location\u30b5\u30fc\u30d3\u30b9\u3092\u30b3\u30f3\u30b9\u30c8\u30e9\u30af\u30bf\u306b\u633f\u5165\u3057\u3001\u305d\u306e\u5024\u3092\u30d7\u30e9\u30a4\u30d9\u30fc\u30c8\u30d5\u30a3\u30fc\u30eb\u30c9\u306b\u4fdd\u5b58\u3057\u307e\u3059\u3002<\/p>\n src\/app\/hero-detail.component.ts (constructor)<\/strong><\/p>\n \u5f8c\u3067\u7d4c\u8def\u30d1\u30e9\u30e1\u30fc\u30bfObservable<\/strong>\u3067\u3001\u4f7f\u7528\u3059\u308bswitchMap<\/strong>\u6f14\u7b97\u5b50\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u307e\u3059\u3002<\/p>\n src\/app\/hero-detail.component.ts (switchMap import)<\/strong><\/p>\n \u30af\u30e9\u30b9\u306bOnInit\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30a4\u30b9\u3092\u5b9f\u88c5\u3059\u308b\u3088\u3046\u306b\u6307\u793a\u3057\u307e\u3059\u3002<\/p>\n src\/app\/hero-detail.component.ts (implement)<\/strong><\/p>\n ngOnInit\u30e9\u30a4\u30d5\u30b5\u30a4\u30af\u30eb\u30d5\u30c3\u30af\u306e\u4e2d\u3067\u3001Observable<\/strong>\u3068\u3044\u3046\u30d1\u30e9\u30e1\u30fc\u30bf\u3092\u4f7f\u7528\u3057\u3066\u3001ActivatedRoute<\/strong>\u30b5\u30fc\u30d3\u30b9\u304b\u3089id\u30d1\u30e9\u30e1\u30fc\u30bf\u5024\u3092\u62bd\u51fa\u3057\u3001HeroService\u3092\u4f7f\u7528\u3057\u3066\u305d\u306eID\u3092\u6301\u3064\u30d2\u30fc\u30ed\u30fc\u3092\u53d6\u5f97\u3057\u307e\u3059\u3002<\/p>\n src\/app\/hero-detail.component.ts (ngOnInit)<\/strong><\/p>\n switchMap<\/strong>\u30aa\u30da\u30ec\u30fc\u30bf\u306f\u3001Observable<\/strong>\u30eb\u30fc\u30c8\u30d1\u30e9\u30e1\u30fc\u30bf\u306eID\u3092HeroService.getHero\uff08\uff09<\/strong>\u30e1\u30bd\u30c3\u30c9\u306e\u7d50\u679c\u3067\u3042\u308b\u65b0\u3057\u3044Observable<\/strong>\u306b\u30de\u30c3\u30d7\u3057\u307e\u3059\u3002<\/p>\n getHero\u8981\u6c42\u304c\u51e6\u7406\u3055\u308c\u3066\u3044\u308b\u9593\u306b\u30e6\u30fc\u30b6\u30fc\u304c\u3053\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u518d\u5ea6\u79fb\u52d5\u3057\u305f\u5834\u5408\u3001switchMap\u306f\u53e4\u3044\u8981\u6c42\u3092\u53d6\u308a\u6d88\u3057\u3001HeroService.getHero\uff08\uff09<\/strong>\u3092\u518d\u5ea6\u547c\u3073\u51fa\u3057\u307e\u3059\u3002<\/p>\n \u30d2\u30fc\u30ed\u30fcid\u306f\u6570\u5b57\u3067\u3059\u3002<\/p>\n \u30eb\u30fc\u30c8\u30d1\u30e9\u30e1\u30fc\u30bf\u306f\u5e38\u306b\u6587\u5b57\u5217\u3067\u3059\u3002<\/p>\n \u3057\u305f\u304c\u3063\u3066\u3001\u30eb\u30fc\u30c8\u30d1\u30e9\u30e1\u30fc\u30bf\u306e\u5024\u306f\u3001JavaScript\uff08+\uff09\u6f14\u7b97\u5b50\u3092\u4f7f\u7528\u3057\u3066\u6570\u5024\u306b\u5909\u63db\u3055\u308c\u307e\u3059\u3002<\/p>\n “““ Routing & Navigation<\/a> \u30da\u30fc\u30b8\u306ethe one-stop-shop for route information<\/a> \u30bb\u30af\u30b7\u30e7\u30f3\u306b\u3042\u308bActivatedRoute\u3067\u8aac\u660e\u3057\u305f\u3088\u3046\u306b\u3001\u30eb\u30fc\u30bf\u30fc\u306f\u63d0\u4f9b\u3059\u308b\u30aa\u30d6\u30b6\u30fc\u30d0\u30d6\u30eb\u3092\u7ba1\u7406\u3057\u3001\u30b5\u30d6\u30b9\u30af\u30ea\u30d7\u30b7\u30e7\u30f3\u3092\u30ed\u30fc\u30ab\u30e9\u30a4\u30ba\u3057\u307e\u3059\u3002<\/p>\n \u30b5\u30d6\u30b9\u30af\u30ea\u30d7\u30b7\u30e7\u30f3\u306f\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u7834\u68c4\u3055\u308c\u305f\u3068\u304d\u306b\u30af\u30ea\u30fc\u30f3\u30a2\u30c3\u30d7\u3055\u308c\u3001\u30e1\u30e2\u30ea\u30fc\u30ea\u30fc\u30af\u3092\u9632\u304e\u307e\u3059\u3002<\/p>\n \u3057\u305f\u304c\u3063\u3066\u3001Observable\u3068\u3044\u3046\u30d1\u30e9\u30e1\u30fc\u30bf\u30fcparams\u304b\u3089\u306e\u767b\u9332\u3092\u89e3\u9664\u3059\u308b\u5fc5\u8981\u306f\u3042\u308a\u307e\u305b\u3093\u3002 \u524d\u306e\u30b3\u30fc\u30c9\u30b9\u30cb\u30da\u30c3\u30c8\u3067\u306f\u3001HeroService<\/strong>\u306b\u306fgetHero\uff08\uff09\u30e1\u30bd\u30c3\u30c9\u304c\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n \u3053\u306e\u554f\u984c\u3092\u89e3\u6c7a\u3059\u308b\u306b\u306f\u3001HeroService<\/strong>\u3092\u958b\u304d\u3001getHeroes<\/strong>\u306e\u30d2\u30fc\u30ed\u30fc\u30ea\u30b9\u30c8\u3092id\u3067\u30d5\u30a3\u30eb\u30bf\u30ea\u30f3\u30b0\u3059\u308bgetHero\uff08\uff09\u30e1\u30bd\u30c3\u30c9\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n
\nAngular2\u306e\u59cb\u3081\u65b9\u3002Angular2 \u516c\u5f0f\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb \u2013 Services\uff08\u7c21\u5358\u306a\u548c\u8a33\uff09<\/a><\/p>\n![\"\"](\"https:\/\/www.webcyou.com\/wp-content\/uploads\/2017\/04\/nav-diagram.png\")
<\/p>\n
\n\u30eb\u30fc\u30bf\u306e\u8a73\u7d30\u306b\u3064\u3044\u3066\u306f\u3001Routing and Navigation\u30da\u30fc\u30b8<\/a>\u3092\u53c2\u7167\u3057\u3066\u304f\u3060\u3055\u3044\u3002
\n“““<\/p>\n
\n\u30e9\u30a4\u30d6\u30b5\u30f3\u30d7\u30eb\u306e\u30d6\u30e9\u30a6\u30b6\u306e\u30a2\u30c9\u30ec\u30b9\u30d0\u30fc\u3067URL\u306e\u5909\u66f4\u3092\u78ba\u8a8d\u3059\u308b\u306b\u306f\u3001\u53f3\u4e0a\u306e\u30a2\u30a4\u30b3\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066Plunker\u30a8\u30c7\u30a3\u30bf\u3067\u3082\u3046\u4e00\u5ea6\u958b\u304d\u3001\u53f3\u4e0a\u9685\u306e\u9752\u3044\u300cX\u300d\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u30d7\u30ec\u30d3\u30e5\u30fc\u30a6\u30a3\u30f3\u30c9\u30a6\u3092\u958b\u304d\u307e\u3059\u3002<\/p>\n![\"\"](\"https:\/\/www.webcyou.com\/wp-content\/uploads\/2017\/04\/plunker-switch-to-editor-button.png\")
\n“““<\/p>\nWhere you left off<\/h4>\n
angular-tour-of-heroes\r\n\u251c\u2500\u2500src\r\n\u2502 \u251c\u2500\u2500app\r\n\u2502 \u2502 \u251c\u2500\u2500app.component.ts\r\n\u2502 \u2502 \u251c\u2500\u2500app.module.ts\r\n\u2502 \u2502 \u251c\u2500\u2500hero.ts\r\n\u2502 \u2502 \u251c\u2500\u2500hero-detail.component.ts\r\n\u2502 \u2502 \u251c\u2500\u2500hero.service.ts\r\n\u2502 \u2502 \u2514\u2500\u2500mock-heroes.ts\r\n\u2502 \u251c\u2500\u2500main.ts\r\n\u2502 \u251c\u2500\u2500index.html\r\n\u2502 \u251c\u2500\u2500styles.css\r\n\u2502 \u251c\u2500\u2500systemjs.config.js\r\n\u2502 \u2514\u2500\u2500tsconfig.json\r\n\u251c\u2500\u2500node_modules ...\r\n\u2514\u2500\u2500package.json<\/pre>\n
Keep the app transpiling and running<\/h4>\n
$ npm start<\/pre>\n
Action plan<\/h4>\n
\n\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u306f\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u306e\u5225\u306e\u540d\u524d\u3067\u3059\u3002\u30eb\u30fc\u30bf\u306f\u3001\u30d3\u30e5\u30fc\u304b\u3089\u30d3\u30e5\u30fc\u306b\u30ca\u30d3\u30b2\u30fc\u30c8\u3059\u308b\u305f\u3081\u306e\u30e1\u30ab\u30cb\u30ba\u30e0\u3067\u3059\u3002
\n“““<\/p>\nSplitting the AppComponent<\/h4>\n
HeroesComponent<\/h5>\n
@Component({\r\n selector: 'my-heroes',\r\n})\r\nexport class HeroesComponent implements OnInit {\r\n}<\/pre>\nCreate AppComponent<\/h5>\n
\n
\n
import { Component } from '@angular\/core';\r\n@Component({\r\n selector: 'my-app',\r\n template: `\r\n <h1>{{title}}<\/h1>\r\n <my-heroes><\/my-heroes>\r\n `\r\n})\r\nexport class AppComponent {\r\n title = 'Tour of Heroes';\r\n}<\/pre>\nimport { NgModule } from '@angular\/core';\r\nimport { BrowserModule } from '@angular\/platform-browser';\r\nimport { FormsModule } from '@angular\/forms';\r\nimport { AppComponent } from '.\/app.component';\r\nimport { HeroDetailComponent } from '.\/hero-detail.component';\r\nimport { HeroesComponent } from '.\/heroes.component';\r\nimport { HeroService } from '.\/hero.service';\r\n@NgModule({\r\n imports: [\r\n BrowserModule,\r\n FormsModule\r\n ],\r\n declarations: [\r\n AppComponent,\r\n HeroDetailComponent,\r\n HeroesComponent\r\n ],\r\n providers: [\r\n HeroService\r\n ],\r\n bootstrap: [ AppComponent ]\r\n})\r\nexport class AppModule {\r\n}<\/pre>\nAdding routing<\/h4>\n
<base href><\/h5>\n
<head>\r\n <base href="\/"><\/pre>\n
\n\u8a73\u7d30\u306b\u3064\u3044\u3066\u306f\u3001Routing and Navigation<\/a>\u30da\u30fc\u30b8\u306e\u300cSet the base href<\/a>\u300d\u30bb\u30af\u30b7\u30e7\u30f3\u3092\u53c2\u7167\u3057\u3066\u304f\u3060\u3055\u3044\u3002
\n“““<\/p>\nConfigure routes<\/h5>\n
import { RouterModule } from '@angular\/router';\r\n\r\nRouterModule.forRoot([\r\n {\r\n path: 'heroes',\r\n component: HeroesComponent\r\n }\r\n])<\/pre>\n
\n\u300cRouting\uff06Navigation\u300d\u30da\u30fc\u30b8<\/a>\u3067\u3001\u300cRoutes\u300d\u3067\u7d4c\u8def\u3092\u5b9a\u7fa9\u3059\u308b\u65b9\u6cd5\u306e\u8a73\u7d30\u3092\u8aad\u3093\u3067\u304f\u3060\u3055\u3044\u3002
\n“““<\/p>\nMake the router available<\/h5>\n
import { NgModule } from '@angular\/core';\r\nimport { BrowserModule } from '@angular\/platform-browser';\r\nimport { FormsModule } from '@angular\/forms';\r\nimport { RouterModule } from '@angular\/router';\r\n\r\nimport { AppComponent } from '.\/app.component';\r\nimport { HeroDetailComponent } from '.\/hero-detail.component';\r\nimport { HeroesComponent } from '.\/heroes.component';\r\nimport { HeroService } from '.\/hero.service';\r\n\r\n@NgModule({\r\n imports: [\r\n BrowserModule,\r\n FormsModule,\r\n RouterModule.forRoot([\r\n {\r\n path: 'heroes',\r\n component: HeroesComponent\r\n }\r\n ])\r\n ],\r\n declarations: [\r\n AppComponent,\r\n HeroDetailComponent,\r\n HeroesComponent\r\n ],\r\n providers: [\r\n HeroService\r\n ],\r\n bootstrap: [ AppComponent ]\r\n})\r\nexport class AppModule {\r\n}<\/pre>\n
\n\u8a2d\u5b9a\u3055\u308c\u305f\u30eb\u30fc\u30bf\u30fc\u304c\u3001\u30a2\u30d7\u30ea\u306e\u30eb\u30fc\u30c8\u306b\u7528\u610f\u3055\u308c\u3066\u3044\u308b\u305f\u3081\u3001forRoot\uff08\uff09\u30e1\u30bd\u30c3\u30c9\u304c\u547c\u3073\u51fa\u3055\u308c\u307e\u3059\u3002<\/p>\n
\n“““<\/p>\nRouter outlet<\/h5>\n
Router links<\/h5>\n
template: `\r\n <h1>{{title}}<\/h1>\r\n <a routerLink="\/heroes">Heroes<\/a>\r\n <router-outlet><\/router-outlet>\r\n `<\/pre>\nimport { Component } from '@angular\/core';\r\n@Component({\r\n selector: 'my-app',\r\n template: `\r\n <h1>{{title}}<\/h1>\r\n <a routerLink="\/heroes">Heroes<\/a>\r\n <router-outlet><\/router-outlet>\r\n `\r\n})\r\nexport class AppComponent {\r\n title = 'Tour of Heroes';\r\n}<\/pre>\nAdd a dashboard<\/h4>\n
import { Component } from '@angular\/core';\r\n\r\n@Component({\r\n selector: 'my-dashboard',\r\n template: '<h3>My Dashboard<\/h3>'\r\n})\r\nexport class DashboardComponent { }\r\n<\/pre>\nConfigure the dashboard route<\/h5>\n
{\r\n path: 'dashboard',\r\n component: DashboardComponent\r\n},<\/pre>\ndeclarations: [\r\n AppComponent,\r\n DashboardComponent,\r\n HeroDetailComponent,\r\n HeroesComponent\r\n],<\/pre>\n
Add a redirect route<\/h5>\n
{\r\n path: '',\r\n redirectTo: '\/dashboard',\r\n pathMatch: 'full'\r\n},<\/pre>\n
\n Routing & Navigation<\/a> \u30da\u30fc\u30b8\u306e Redirecting routes<\/a> \u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3001\u30ea\u30c0\u30a4\u30ec\u30af\u30c8\u306e\u8a73\u7d30\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002
\n“““<\/p>\nAdd navigation to the template<\/h5>\n
template: `\r\n <h1>{{title}}<\/h1>\r\n <nav>\r\n <a routerLink="\/dashboard">Dashboard<\/a>\r\n <a routerLink="\/heroes">Heroes<\/a>\r\n <\/nav>\r\n <router-outlet><\/router-outlet>\r\n `<\/pre>\n
\n<nav>\u30bf\u30b0\u306f\u307e\u3060\u4f55\u3082\u3057\u307e\u305b\u3093\u304c\u3001\u5f8c\u3067\u30ea\u30f3\u30af\u3092\u30b9\u30bf\u30a4\u30eb\u3059\u308b\u3068\u304d\u306b\u4fbf\u5229\u3067\u3059\u3002
\n“““<\/p>\nAdd heroes to the dashboard<\/h4>\n
@Component({\r\n selector: 'my-dashboard',\r\n templateUrl: '.\/dashboard.component.html',\r\n})<\/pre>\n<h3>Top Heroes<\/h3>\r\n<div class="grid grid-pad">\r\n <div *ngFor="let hero of heroes" class="col-1-4">\r\n <div class="module hero">\r\n <h4>{{hero.name}}<\/h4>\r\n <\/div>\r\n <\/div>\r\n<\/div><\/pre>\nSharing the HeroService<\/h5>\n
Get heroes<\/h5>\n
import { Component, OnInit } from '@angular\/core';\r\n\r\nimport { Hero } from '.\/hero';\r\nimport { HeroService } from '.\/hero.service';<\/pre>\nexport class DashboardComponent implements OnInit {\r\n\r\n heroes: Hero[] = [];\r\n\r\n constructor(private heroService: HeroService) { }\r\n\r\n ngOnInit(): void {\r\n this.heroService.getHeroes()\r\n .then(heroes => this.heroes = heroes.slice(1, 5));\r\n }\r\n}<\/pre>\nNavigating to hero details<\/h4>\n
Routing to a hero detail<\/h5>\n
<hero-detail [hero]="selectedHero"><\/hero-detail><\/pre>\n
Parameterized route<\/h5>\n
\/detail\/11<\/pre>\n
Configure a route with a parameter<\/h5>\n
{\r\n path: 'detail\/:id',\r\n component: HeroDetailComponent\r\n},<\/pre>\nRevise the HeroDetailComponent<\/h4>\n
import { Component, Input } from '@angular\/core';\r\nimport { Hero } from '.\/hero';\r\n@Component({\r\n selector: 'hero-detail',\r\n template: `\r\n <div *ngIf="hero">\r\n <h2>{{hero.name}} details!<\/h2>\r\n <div>\r\n <label>id: <\/label>{{hero.id}}\r\n <\/div>\r\n <div>\r\n <label>name: <\/label>\r\n <input [(ngModel)]="hero.name" placeholder="name"\/>\r\n <\/div>\r\n <\/div>\r\n `\r\n})\r\nexport class HeroDetailComponent {\r\n @Input() hero: Hero;\r\n}<\/pre>\n\/\/ Keep the Input import for now, you'll remove it later:\r\nimport { Component, Input, OnInit } from '@angular\/core';\r\nimport { ActivatedRoute, Params } from '@angular\/router';\r\nimport { Location } from '@angular\/common';\r\n\r\nimport { HeroService } from '.\/hero.service';<\/pre>\nconstructor(\r\n private heroService: HeroService,\r\n private route: ActivatedRoute,\r\n private location: Location\r\n) {}<\/pre>\nimport 'rxjs\/add\/operator\/switchMap';<\/pre>\n
export class HeroDetailComponent implements OnInit {<\/pre>\nngOnInit(): void {\r\n this.route.params\r\n .switchMap((params: Params) => this.heroService.getHero(+params['id']))\r\n .subscribe(hero => this.hero = hero);\r\n}<\/pre>\n
\n\u9000\u4f1a\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u304b\uff1f<\/p>\n
\n“““<\/p>\nAdd HeroService.getHero<\/h5>\n