Angular 2(RC 4)-ルーティングとナビゲーション

3508 ワード
基礎知識
1.
ほとんどのルーティング付きアプリケーションはindexにある.htmlの
  .
2. 
import { ROUTER_DIRECTIVES } from '@angular/router';

3. 
 “ ” provideRouterファクトリ ([provideRouter(routes)])は、このアプリケーションを するために される.
app.routes.ts 
import { provideRouter, RouterConfig } from '@angular/router';

const routes: RouterConfig = [
  { path: 'crisis-center', component: CrisisCenterComponent },
  { path: 'heroes', component: HeroListComponent },
  { path: 'hero/:id', component: HeroDetailComponent },
  { path: '**', component: PageNotFoundComponent }
];

export const appRouterProviders = [
  provideRouter(routes)
];
 RouterConfigは、ナビゲーション を するルーティング です. Routeは、1つのURLのpathを1つのコンポーネントにマッピングします.pathはスラッシュ/の を できません.ルータはURLを して します.
3 のルーティングのidは、ルーティングパラメータのtokenである.
4 の のうちの**は、 が  であることを す. 、 たちが したパスのいずれかに しない 、ルータはswitchのdefaultに ています.404ページを する がある 、この は に である.
 されたroutes をprovideRouter（） に し、この は されたRouterサービスプロバイダに ります.
 に、appRouterProviders を してプロバイダを し、main.tsにおいてルータ を に する.main.tsのbootstrap にルータのプロバイダを します.
main.ts // main entry point
import { bootstrap }          from '@angular/platform-browser-dynamic';
import { AppComponent }       from './app.component';
import { appRouterProviders } from './app.routes';

bootstrap(AppComponent, [
  appRouterProviders
])
.catch(err => console.error(err));
 
4.  
 の が すると、URLが/heroesになると、ルータはpathがheroesのRouteに し、ホストビューのにHeroListComponentコンポーネントが される.
5. [routerLink] ラベルにrouterLink を し、 たちのルーティングのpath に にバインドすることができます.routerLinkが をバインドしたい 、ルーティングリンク を すことができるテンプレート にバインドすることができます.ルータは にこの をURLとコンポーネントビューに します.
また、にrouterLinkActive を して、 するrouterLinkがアクティブになったときに がCSSクラスを または することもできます.このコマンドは、エレメントに することも、 エレメントに することもできます.
AppComponentテンプレートtemplate: `
  Component Router
  
    Crisis Center
    Heroes
  
  
`,

 
6.ルータの 
 ナビゲーションのライフサイクルが すると、ルータはActivatedRouteからなるツリーを し、ルータの の を します. のRouter にアクセスするには、アプリケーション のrouterStateサービスおよびそのRouterState を することができます.
7.ROUTER_DIRECTIVES RouterLink、RouterLinkActive、およびRouterOutletは、ROUTER_DIRECTIVESの における であるので、@Componentメタデータにdirectives を み む がある.directives: [ROUTER_DIRECTIVES]
 
この が きなら、いいねやコレクションをしてください. のもっと くの を たいなら、 に してください.
重量除去VDOボリュームのリカバリと再構築
PHP仕様