Routing

  • 於專案建立同時輸入 --routing，及可建置具 Routing 之 App
  • 若無輸入 --routing，系統會跳出詢問，輸入 y 一樣可產生 routing 相關元件，輸入 n 則不產生
  • 若欲於既有專案加入 routing 模組，可輸入 ng g module app-routing --module app --flat -- project [專案名稱]

Code

export const routes: Routes = [
    {path: 'p1', component: Page1Component, title: "Page1"},
    {path: 'p2', component: Page2Component, title: "Page2"}
];

<div style="text-align:center">
    <h1>
        Welcome to {{title}}
    </h1>
    <ul>
        <li *ngFor="let r of routeList">
        <a [routerLink]="[r.path]">{{r.title ? r.title : ""}}</a>
        </li>
    </ul>
</div>

<router-outlet></router-outlet>

import { routes } from './app-routing.module';

export class AppComponent {
    title = 'mod02';
    routeList = routes;
}

Result

routes