Hey everyone,
This is driving me nuts for hours now so I hope it's something stupid and
obvious that someone can point out in a sec :)
I have a Component Welcome which I route to / and it evaluates "username"
in a <p> element.
If I bootstrap the component directly, it all works fine.
If I go through the RouterOutlet (tried both the standard and my custom
one), I get an empty element.
I am on alpha27. No errors or anything in the console.
Any ideas? Code below.
Georgios
WebApp.ts
========
@Component({
selector: 'fl-web-app',
appInjector: [HttpService, AuthenticationService]
})
@View({
template: `
<router-outlet></router-outlet>
`,
directives: [LoggedInRouterOutlet, coreDirectives]
})
@RouteConfig([
{ path: '/', as: 'welcome', component: Welcome },
{ path: '/login', as: 'login', component: Login }
])
export class WebApp {
}
Welcome.ts
=========
@Component({
selector: "welcome"
})
@View({
templateUrl: "app/welcome.html"
})
export class Welcome {
username: string;
constructor(private router: Router, private authenticationService:
AuthenticationService) {
this.username = "test"; // this.authenticationService.getUsername()
}
}
Welcome.html
==========
<div>
<h1>Welcome</h1>
<p>{{ username }}</p>
</div>
LoggedInOutlet.ts
=============
@Directive({ selector: 'router-outlet' })
export class LoggedInRouterOutlet extends RouterOutlet {
static publicRoutes = {
'/login': true
};
constructor(
elementRef: ElementRef,
loader: DynamicComponentLoader,
private _parentRouter: Router,
injector: Injector,
@Attribute("name") nameAttr: string,
private authenticationService: AuthenticationService) {
super(elementRef, loader, _parentRouter, injector, nameAttr);
}
activate(instruction: Instruction) {
var url = this._parentRouter.lastNavigationAttempt;
if (!LoggedInRouterOutlet.publicRoutes[url] &&
!this.authenticationService.isLoggedIn()) {
instruction.component = Login;
}
return super.activate(instruction);
}
}
Bootstrap.ts:
=========
BrowserDomAdapter.makeCurrent();
var formInjectables: Array<any> = [
FormBuilder
];
var hasShadowDom: boolean = Boolean(document && document.body &&
document.body.createShadowRoot);
var shadowDomInjectables: Array<any> = !hasShadowDom ? [] : [
bind(ShadowDomStrategy).toClass(NativeShadowDomStrategy)
];
var jitInjectables: Array<any> = [
bind(ChangeDetection).toClass(JitChangeDetection)
];
bootstrap(WebApp,
[
formInjectables,
routerInjectables,
httpInjectables,
shadowDomInjectables,
jitInjectables
]);
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
