Skip to content

Instantly share code, notes, and snippets.

@fergusg
Last active November 29, 2015 18:11
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save fergusg/09a5aba143a46990aa69 to your computer and use it in GitHub Desktop.
Vetoing a href click in Angular2
import {Component, View, Directive} from 'angular2/angular2';
import {Router, Instruction} from 'angular2/router';
@Directive({
// This is a CSS selector. It's confusing that the template syntax ALSO uses []
selector: "[veto-router-link]",
host: {
"(click)": "onClick($event)",
"[attr.href]": "getLink()"
},
// aaa:bbb means "make this.aaa = attr.bbb"
// Note 1: if both use the same name, then can use just "aaa"
// Note 2: can use either "veto-if" or camelCase "vetoIf"
inputs: [
'veto:veto-if',
'route:veto-router-link'
]
})
class Veto {
private route: any[];
private veto: boolean;
constructor(public router: Router) {
}
private getLink = () => {
// <a>'s only normally render as expected with an explicit href,
// so try to generate somthing better than href='#'.
// The actual href is ignored via event.preventDefault()
if (typeof this.veto === 'undefined') {
throw "veto-router-link needs a veto-if condition";
}
let instruction = this.router.generate(this.route);
// I don't know how to generate a proper URL reliably. There's a
// stringifyInstruction() but that's hidden.
return `#/${instruction.component.urlPath}`;
}
// 'onClick' is NOT a magic name - the click event is mapped to a function
// via the 'host' defintion above
public onClick = ($event: Event) => {
$event.preventDefault(); // don't navigate to href.
if (!this.veto) {
this.router.navigate(this.route);
} else {
console.log('route vetoed');
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment