da9b46a071
BREAKING CHANGE:
Angular is now fully camel case.
Before:
<p *ng-if="cond">
<my-cmp [my-prop]="exp">
<my-cmp (my-event)="action()">
<my-cmp [(my-prop)]="prop">
<input #my-input>
<template ng-for #my-item [ng-for-of]=items #my-index="index">
After
<p *ngIf="cond">
<my-cmp [myProp]="exp">
<my-cmp (myEvent)="action()">
<my-cmp [(myProp)]="prop">
<input #myInput>`,
<template ngFor="#my-item" [ngForOf]=items #myIndex="index">
The full details are found in [angular2/docs/migration/kebab-case.md](https://github.com/angular/angular/blob/master/modules/angular2/docs/migration/kebab-case.md)
58 lines
1.3 KiB
TypeScript
58 lines
1.3 KiB
TypeScript
import {bootstrap, Component, provide} from 'angular2/angular2';
|
|
import {
|
|
CanActivate,
|
|
RouteConfig,
|
|
ComponentInstruction,
|
|
ROUTER_DIRECTIVES,
|
|
APP_BASE_HREF,
|
|
CanReuse,
|
|
RouteParams,
|
|
OnReuse
|
|
} from 'angular2/router';
|
|
|
|
|
|
// #docregion reuseCmp
|
|
@Component({
|
|
selector: 'my-cmp',
|
|
template: `
|
|
<div>hello {{name}}!</div>
|
|
<div>message: <input id="message"></div>
|
|
`
|
|
})
|
|
class MyCmp implements CanReuse,
|
|
OnReuse {
|
|
name: string;
|
|
constructor(params: RouteParams) { this.name = params.get('name') || 'NOBODY'; }
|
|
|
|
routerCanReuse(next: ComponentInstruction, prev: ComponentInstruction) { return true; }
|
|
|
|
routerOnReuse(next: ComponentInstruction, prev: ComponentInstruction) {
|
|
this.name = next.params['name'];
|
|
}
|
|
}
|
|
// #enddocregion
|
|
|
|
|
|
@Component({
|
|
selector: 'example-app',
|
|
template: `
|
|
<h1>Say hi to...</h1>
|
|
<a [routerLink]="['/HomeCmp', {name: 'naomi'}]" id="naomi-link">Naomi</a> |
|
|
<a [routerLink]="['/HomeCmp', {name: 'brad'}]" id="brad-link">Brad</a>
|
|
<router-outlet></router-outlet>
|
|
`,
|
|
directives: [ROUTER_DIRECTIVES]
|
|
})
|
|
@RouteConfig([
|
|
{path: '/', component: MyCmp, name: 'HomeCmp'},
|
|
{path: '/:name', component: MyCmp, name: 'HomeCmp'}
|
|
])
|
|
class AppCmp {
|
|
}
|
|
|
|
|
|
export function main() {
|
|
return bootstrap(AppCmp,
|
|
[provide(APP_BASE_HREF, {useValue: '/angular2/examples/router/ts/reuse'})]);
|
|
}
|