breadcrumb.ts

import { 
	Component, 
	View,
	NgFor,
	NgIf
} from 'angular2/angular2';

import { 
	Router,
	ROUTER_DIRECTIVES
} from 'angular2/router';

import {
    Observable
} from '@reactivex/rxjs/dist/cjs/Rx';

@Component({
	selector: 'breadcrumbs'
})
@View({
	template: `
    <div *ng-for="#route of breadcrumbsCollection">
    	<a 
    		href="" 
    		
    		*ng-if="route.terminal"
    		[router-link]="route.linkParams">
    		{{ route.displayName }}
    	</a>
    	
    	<span *ng-if="!route.terminal">{{ route.displayName }}</span>
    </div>	
	`,
	directives: [ 
		ROUTER_DIRECTIVES,
		NgFor,
		NgIf 
	]
})
export class BreadcrumbsComponent {
	public breadcrumbsCollection: Array<any>;
	
	constructor(private _router: Router) {
		this._router.subscribe(routeUrl => {
		
			
			let instructions = [];
			
			this._router.recognize(routeUrl).then(instruction => {
				instructions.push(instruction);
				
				while (instruction.child) {
					instruction = instruction.child;
					
					instructions.push(instruction);
				}
				
				this.breadcrumbsCollection = instructions
					.map((inst, index) => {							
						return {
							displayName: inst.component.routeData.get('displayName'),
							as: inst.component.routeData.get('name'),
							terminal: inst.component.terminal,
							linkParams: this._getLinkParams(instructions, index)
						}
					});
				

			});
			
		});
	}
	
	private _getLinkParams(instructions, until) {		
		let linkParams = [];
		
		instructions.forEach((item, index) => {
			let component = item.component;
			
			if (index <= until) {
				
				linkParams.push(component.routeData.get('name'));
				
				if (!this._isEmpty(component.params)) {
					linkParams.push(component.params);
				}
			}
		});

		return linkParams;	
	}
	
	private _isEmpty(obj) {
		for(var prop in obj) {
			if(obj.hasOwnProperty(prop))
			return false;
		}
		
		return true;		
	}
}