docs(router): attribute notation for string paths (#12205)

Either bind an expression or use the attribute notation.
The mixed way `[routerLink]="/path"` won't work.
Prefer the attribute notation for string-only paths
This commit is contained in:
Ferdinand Malcher
2016-10-18 07:53:55 +02:00
committed by Igor Minar
parent 52de0fa558
commit d55f747858

View File

@ -20,7 +20,7 @@ import {RouterLink, RouterLinkWithHref} from './router_link';
* @howToUse * @howToUse
* *
* ``` * ```
* <a [routerLink]='/user/bob' routerLinkActive='active-link'>Bob</a> * <a routerLink="/user/bob" routerLinkActive="active-link">Bob</a>
* ``` * ```
* *
* @description * @description
@ -31,7 +31,7 @@ import {RouterLink, RouterLinkWithHref} from './router_link';
* Consider the following example: * Consider the following example:
* *
* ``` * ```
* <a [routerLink]="/user/bob" routerLinkActive="active-link">Bob</a> * <a routerLink="/user/bob" routerLinkActive="active-link">Bob</a>
* ``` * ```
* *
* When the url is either '/user' or '/user/bob', the active-link class will * When the url is either '/user' or '/user/bob', the active-link class will
@ -40,15 +40,15 @@ import {RouterLink, RouterLinkWithHref} from './router_link';
* You can set more than one class, as follows: * You can set more than one class, as follows:
* *
* ``` * ```
* <a [routerLink]="/user/bob" routerLinkActive="class1 class2">Bob</a> * <a routerLink="/user/bob" routerLinkActive="class1 class2">Bob</a>
* <a [routerLink]="/user/bob" [routerLinkActive]="['class1', 'class2']">Bob</a> * <a routerLink="/user/bob" [routerLinkActive]="['class1', 'class2']">Bob</a>
* ``` * ```
* *
* You can configure RouterLinkActive by passing `exact: true`. This will add the classes * You can configure RouterLinkActive by passing `exact: true`. This will add the classes
* only when the url matches the link exactly. * only when the url matches the link exactly.
* *
* ``` * ```
* <a [routerLink]="/user/bob" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: * <a routerLink="/user/bob" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact:
* true}">Bob</a> * true}">Bob</a>
* ``` * ```
* *
@ -56,8 +56,8 @@ import {RouterLink, RouterLinkWithHref} from './router_link';
* *
* ``` * ```
* <div routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}"> * <div routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">
* <a [routerLink]="/user/jim">Jim</a> * <a routerLink="/user/jim">Jim</a>
* <a [routerLink]="/user/bob">Bob</a> * <a routerLink="/user/bob">Bob</a>
* </div> * </div>
* ``` * ```
* *