路由啟動樣式

說明

1. 可對Dom上的路由連結element設定樣式
2. 路由比對時，會包含根路由，也就是下層路由會包含上層路由(例如 "/" 與 "/page-b")
3. 可利用<element [routerLinkActiveOptions]="{exact: true}"></element>，避免套用到上層路徑

Template語法：

1. 屬性繫結，傳入陣列

   <element [routerLink]="['/path']" routerLinkActive="cssClassName"></element>
   

程式碼範例：

1.在app.component.css中設定.class樣式

.activeStyle {
  background: yellow
}

2.在app.component.html中設定routerLinkActive

<ul>
  <li><a [routerLink]="['pageA']" routerLinkActive="activeStyle">來去page-a</a></li>
  <li><a routerLink="pageB" routerLinkActive="activeStyle">來去page-b</a></li>
</ul>

3.測試超連結

4.練習路由比對，將app-routing.module.ts內的路由設定變更為如下：

const routes: Routes = [
  {
    path: '',
    component: PageAComponent
  },
  {
    path: 'pageB',
    component: PageBComponent
  }
];

5.將app.component.html內的超連結變更為如下：

<ul>
  <li><a [routerLink]="['/']" routerLinkActive="activeStyle">來去page-a</a></li>
  <li><a routerLink="/pageB" routerLinkActive="activeStyle">來去page-b</a></li>
</ul>

6.測試超連結

7.練習避免套用到上層路徑，將app.component.html內的超連結變更為如下：

<ul>
  <li><a [routerLink]="['/']" routerLinkActive="activeStyle" [routerLinkActiveOptions]="{exact: true}">來去page-a</a></li>
  <li><a routerLink="/pageB" routerLinkActive="activeStyle" [routerLinkActiveOptions]="{exact: true}">來去page-b</a></li>
</ul>

8.測試超連結