angularjs - Angular 2 order of loading content -
with angular 2 content loading in "wrong" order.
i new angular 2 , decided start simple.
i expect see menu.ts content before first.component.ts "hello world" content. seems content router loads before content of app.compontent. when put @router @ bottom typescript says "declaration expected" not solution either.
is there no other way placing menu @ each router request?
app.component.ts
import { component } '@angular/core'; import { routes, router_directives } '@angular/router'; import { firstcomponent } './components/firstcomponent/firstcomponent'; @routes([ { path: '/', component: firstcomponent // hello world, loads before component below?! } ]) @component({ 'directives': [router_directives], 'selector': 'app', 'templateurl': `/templates/firstcomponent.menu` }) export class appcomponent { constructor () {} opened: boolean = true; toggle () { this.opened = !this.opened; } }
menu.ts
<a [routerlink]="['/']"></a><router-outlet></router-outlet> <div class="navbar navbar-fixed-top affix-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" (click)="toggle()"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> </div> </div> <div class="navmenu-fixed-left offcanvas clearfix" [ngclass]="{in: opened}" id="navbar-main-menu"> <nav class="container"> <ul class="nav navbar-nav navmenu clearfix" role="menu"> <li><a href="#item1">item 1</a></li> <li><a href="#item2">item 2</a></li> </ul> </nav> </div>
first.component.ts
import { component } '@angular/core'; @component({ 'selector': 'app', 'template': `hello world!` }) export class firstcomponent { }
i had move <router-outlet></router-outlet>
below menu
Comments
Post a Comment