Angularアプリ内ナビゲーション：ビューへのルーティングの例

AngularCLIがこのステップを実行します。ただし、アプリを手動で作成する場合、または既存の非CLIアプリで作業する場合は、インポートと構成が正しいことを確認してください。以下はデフォルトですCLIを使用したAppModule-ルーティングフラグ。

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; // CLI imports AppRoutingModule import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule // CLI adds AppRoutingModule to the AppModule's imports array ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

1. 輸入RouterModuleとルーティングモジュールにルーティングします。

   AngularCLIはこのステップを自動的に実行します。 CLIは、ルートのルート配列と構成輸入との配列をエクスポートします@ NgModule（）。

   import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; // CLI imports router const routes: Routes = []; // sets up routes constant where you define your routes // configures NgModule imports and exports @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

2. でルートを定義するルート配列。

   この配列の各ルートは、2つのプロパティを含むJavaScriptオブジェクトです。最初のプロパティ、pathは、ルートのURLパスを定義します。 2番目のプロパティ、componentは、Angularが対応するパスに使用するコンポーネントを定義します。

   const routes: Routes = [ { path: 'first-component', component: FirstComponent }, { path: 'second-component', component: SecondComponent }, ];

3. アプリケーションにルートを追加します。

   ルートを定義したので、それらをアプリケーションに追加できます。まず、2つのコンポーネントへのリンクを追加します。ルートを追加するアンカータグを割り当てますrouterLink属性。属性の値をコンポーネントに設定して、ユーザーが各リンクをクリックしたときに表示します。次に、コンポーネントテンプレートを更新して、< router-outlet >。この要素は、選択したルートのコンポーネントでアプリケーションビューを更新するようにAngularに通知します。

   <h1>Angular Router Apph1>  <nav> <ul> <li><a routerLink='/first-component' routerLinkActive='active'>First Componenta>li> <li><a routerLink='/second-component' routerLinkActive='active'>Second Componenta>li> ul> nav>  <router-outlet>router-outlet>

{ path: '**', component: }

const routes: Routes = [ { path: 'first-component', component: FirstComponent }, { path: 'second-component', component: SecondComponent }, { path: '**', component: PageNotFoundComponent }, // Wildcard route for a 404 page ];

const routes: Routes = [ { path: 'first-component', component: FirstComponent }, { path: 'second-component', component: SecondComponent }, { path: '', redirectTo: '/first-component', pathMatch: 'full' }, // redirect to `first-component` { path: '**', component: PageNotFoundComponent }, // Wildcard route for a 404 page ];

<h2>First Componenth2> <nav> <ul> <li><a routerLink='child-a'>Child Aa>li> <li><a routerLink='child-b'>Child Ba>li> ul> nav> <router-outlet>router-outlet>

const routes: Routes = [ { path: 'first-component', component: FirstComponent, // this is the component with the in the template children: [ { path: 'child-a', // child route path component: ChildAComponent, // child route component that the router renders }, { path: 'child-b', component: ChildBComponent, // another child route component that the router renders }, ], }, ];

<h2>First Componenth2> <nav> <ul> <li><a routerLink='../second-component'>Relative Route to second componenta>li> ul> nav> <router-outlet>router-outlet>

goToItems() { this.router.navigate(['items'], { relativeTo: this.route }); }

import { ActivatedRoute } from '@angular/router'; import { Observable } from 'rxjs'; import { switchMap } from 'rxjs/operators';

constructor(private route: ActivatedRoute) {}

heroes$: Observable; selectedId: number; heroes = HEROES; ngOnInit() { this.heroes$ = this.route.paramMap.pipe( switchMap(params => { this.selectedId = Number(params.get('id')); return this.service.getHeroes(); }) ); }

import { Router, ActivatedRoute, ParamMap } from '@angular/router'; import { Observable } from 'rxjs';

hero$: Observable; constructor( private route: ActivatedRoute, private router: Router ) {} ngOnInit() { const heroId = this.route.snapshot.paramMap.get('id'); this.hero$ = this.service.getHero(heroId); } gotoItems(hero: Hero) { const heroId = hero ? hero.id : null; // Pass along the hero id if available // so that the HeroList component can select that item. this.router.navigate(['/heroes', { id: heroId }]); }

ng generate guard your-guard

export class YourGuard implements CanActivate { canActivate( next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { // your logic goes here } }

{ path: '/your-path', component: YourComponent, canActivate: [YourGuard], }

<a [routerLink]='['/heroes']'>Heroes</a>

<a [routerLink]='['/hero', hero.id]'> <span class='badge'>{{ hero.id }}span>{{ hero.name }} a>

<a [routerLink]='['/crisis-center', { foo: 'foo' }]'>Crisis Center</a>

<a [routerLink]='['/crisis-center']'>Crisis Center</a>

  Dragon Crisis  

template: `  Crisis Center   Heroes