Satch3000 Satch3000 - 1 year ago 210
AngularJS Question

Angular2 Router load header and footer every time

I am using Angular2 beta and created a webpage with 3 links/components.

I have separately created a header, mainnav and footer component which should only load once?

The problem is that when i navigate to the different links the whole page seems to reload. I don't want the header, mainnav and footer to reload every time, it's too slow.

Shouldn't Angular2 just load the content and not have to reload everything else?

What I'm I doesn't wrong?

Here's the code:

import {Component} from 'angular2/core';
import {RouteConfig} from 'angular2/router';
import {ROUTER_DIRECTIVES} from 'angular2/router';

import {mainnav} from './mainnav.component';
import {header} from './header.component';
import {footer} from './footer.component';

import {HomeComponent} from './home.component';
import {AboutComponent} from './about.component';
import {ContactComponent} from './contact.component';

selector: 'my-app',
directives: [mainnav, header, footer, ROUTER_DIRECTIVES],
template: `



{ path: '/home', name: 'Home', component: HomeComponent, useAsDefault: true },
{ path: '/about', name: 'About', component: AboutComponent },
{ path: '/contact', name: 'Contact', component: ContactComponent }


export class AppComponent {


The links:

<ul class="nav navbar-nav">
<li class="active"><a href="home">Home</a></li>
<li><a href="about">About</a></li>
<li><a href="contact">Contact</a></li>

I know im not using [routerLink] ...would that make a difference in the loading?

Answer Source

You should use routerLink instead

<ul class="nav navbar-nav">
    <li class="active"><a [routerLink]="['/Home']">Home</a></li>
    <li><a [routerLink]="['/About']">About</a></li>
    <li><a [routerLink]="['/Contact']">Contact</a></li>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download