3. Routing 화면전이

参考ページ

Angular入門 未経験から1ヶ月でサービス作れるようにする その3. ルーティング基礎 - Qiita

---

コンポーネントの作成

ng g component [name]

---

Routing File 作成

 

 { path: 'products', component: ProductListComponent }

localhost:4200/products의 URL을 위에서 작성한 ProductListComponent에 매핑하겠다는 의미

{ path: 'products/:id', component: ProductDetailComponent }

 

:id는 컴포넌트에서 파라미터로 취득할수 있으므로 내용에 따라 컴포넌트의 상태를 변경시키고 싶을때 사용.

product의 id를 URL로부터 취득하여 최종적으로 API를 쳐서 그 id의 product정보를 취득하여 표시하고자 할때.

 

{ path: '', redirectTo: '/products', pathMatch: 'prefix' }

 

위 두개의 URL이외의 URL이 지정되면 자동적으로 /products에 리다이렉트 시킨다는 의미.

 

pathMatch

 

• prefix URL이 path값으로 시작하는 경우 모든URL(이번경우는 localhost:4200/로 시작되는 모든 URL)
• full URL이 path와 완전히 일치한 경우 기본페이지가 시작화면이 됨. 와일드카드로 인해 page not found화면으로 리디렉션되는 경우 path: **

app.module.ts にAppRoutingModuleの追加されたのを確認

app.component.htmlに<router-outlet></router-outlet>

localhost:4200/으로 엑세스하면 자동으로 /products로 리다이렉트된다.

---

routerLink 와 [routerLink]

 

 

[]로 감싸는 속성은 Angular에서는 요소에 대해서 Javascript의 요소를 입력한다고 하는 의미가 된다.

[routerLink]는 배열을 받는다. 

<div class="button" [routerLink]="['/products', 'test']">와

 <div class="button" routerLink="/products/test"> 는 같음.

product-list.component.html