程式碼範例--準備工作

程式碼範例：

1.在src/app下建立範本表單元件templateDrivenForm與模型表單元件modelDrivenForm

ng g c templateDrivenForm

ng g c modelDrivenForm

2.在app-routing.module.ts中加入兩個元件頁面的路由

const routes: Routes = [
  {
    path: '',
    redirectTo: "/pageA",
    pathMatch: "full"
  },
  {
    path: 'pageA',
    component: PageAComponent
  },
  {
    path: 'pageB/:id',
    component: PageBComponent,
    canActivate: [RouteGuard]
  },
  {
    path: 'child',
    loadChildren: './child/child.module#ChildModule'
  },
  {
    path: 'error',
    component: ErrorComponent
  },
  {
    path: 'form_template',
    component: TemplateDrivenFormComponent
  },
  {
    path: 'form_Model',
    component: ModelDrivenFormComponent
  },
  errorRoute
];

3.在app.component.html中加入上面兩個頁面的路由超連結

<li><a [routerLink]="['/form_template']" routerLinkActive="activeStyle" [routerLinkActiveOptions]="{exact: true}">範本表單</a></li>
<li><a [routerLink]="['/form_model']" routerLinkActive="activeStyle" [routerLinkActiveOptions]="{exact: true}">模型表單</a></li>

4.測試連結是否正常