i have been playing around routes in angular 2 have run issue cannot find answer for. routes "working" not way hoping for. trying use use ng-view angular 1, header , footer never change, , when url changes new "stuff" placed in content.
here have "works"
import { component } '@angular/core'; import { headercomponent } './shared/header/header.component'; import { contentcomponent } './shared/content/content.component'; import { footercomponent } './shared/footer/footer.component'; import { testcomponent } './components/test.component'; import { routes, router_directives, router_providers } '@angular/router'; @routes([ {path: '/test', component: testcomponent } ]) @component({ selector: 'app', template: `<header></header> <a [routerlink]="['/test']">click testcomponent</a> <router-outlet></router-outlet> <footer></footer>`, directives: [headercomponent, contentcomponent, footercomponent, router_directives] }) export class appcomponent { } what trying put router outlet inside of contentcomponentso router dumps new stuff directly main area of app. when try rewrite:
<router-outlet></router-outlet>
<content><router-outlet></router-outlet></content>
routing stops working, no error message, stops. not see testcomponent in dom when inspect devtools. thought, put router-outlet inside template of contentcomponent so:
import { component } '@angular/core'; @component({ selector: 'content', template: `<router-outlet></router-outlet>` }) export class contentcomponent { } however when error message: cannot find default outlet.
i missing lack of documentation makes difficult figure out, think there way define within @routes outlet again, can't find documentation isn't deprecated-router. hope can shed light on this. in advance.
note: general code critiques helpful, new angular 2 , love advice.
the way call contentcomponent via <content> tag makes contentcomponent child of appcomponent , can't place router-outlet inside child component's template. 1 way achieve after create default route contentcomponent in appcomponent:
@routes([ { path: '/', component: contentcomponent } { path: '/content', component: contentcomponent } ]) and appcomponent's template be:
<header></header> <router-outlet></router-outlet> <footer></footer> now can define nested routes in contentcomponent this:
@routes([ { path: 'content1', component: content1component } ]) @component({ selector: 'content', template: `<router-outlet></router-outlet>` }) export class contentcomponent { } and if have menu in header component , want link each nested content can this:
<a [routerlink]="['/content', 'content1']">content1</a> which load content1component contentcomponent's <router-outlet>
