Navigation to another page keeping the nav bar visible

Question

I am researching about the feature which let us to change the page in an angular2 project.

I got to route different components in the same page by demand. But I want now, to create an hyperlink which redirect me to another page. I can´t figure it out...

Honestly, I am completely lost. I can´t almost find information about it.

My best approaches were (shame on me) trying to use button instead of hiperlink html tag:

my_component.ts

<button (click)="redirect()">Socios del VideoClub</button>
....
Export class myComponent{

    constructor(
     private route: ActivatedRoute,
     private router: Router
    ) {}

    redirect(){
        this.router.navigate(['/socios']);
    }

I defined '/socios' in my app.routing.ts. I tried with navigationByUrl, as well.

Both of them, just do the same, render it in the same page.

Note: I want to redirect by component (I´m injecting in the component), so I can´t use window.location.href

Thanks mates

[EDITED]

app.routing.ts

// Importar componentes y módulos para el routing 
import { Routes, RouterModule } from '@angular/router';

// Componentes
import { SociosComponent } from './socios.component';

// Configuración de las rutas
const appRoutes: Routes = [
  { path: 'socios', component: SociosComponent }
];

export const appRoutingProviders: any[] = [
];

export const routing = RouterModule.forRoot(appRoutes);

Note2: I coded an index. It is a bootstrap carousel fullscreen.

The caption for each image, will be a link to another page.

I want to use angular´s routing for going to these different pages.

I achieved to render a component from the same page which is called it.

I can render, using just html hypelink tag, another static page.

But my problem is when I want to render another page using angular. I want to do it, because I am injecting the model, coming from a service, in this component...

Note3: Well, finally, I did a plunker. My first time doing it so I hope all is correct. If not, please, let me know what you all need and I Will change it. Thanks again :):)

Demo plunker

Answer 1

Here are some guidelines for getting your routing to work as you wish. Referring to your plunker The current content in the app.component should be a separate component. The content you currently have in your app.component should look something like this:

@Component({
  selector: 'my-app',
  template: `
    <nav>
      <a routerLink="/socios">Socios</a>
    </nav>
    <router-outlet></router-outlet>
  `
})
export class AppComponent {
}

And the current content in the app.component, as said, make a new component. Let's call it "LandingPage" for now.

Then in your routes you can define that this component will be the landing page when user navigates to your app, like so: (app.routing)

import { Routes, RouterModule } from '@angular/router';
import { SociosComponent } from './socios.component';
import { LandingPage }  from './pathHere' // your "new" component

const appRoutes: Routes = [
  { path: '', redirectTo: 'landing', pathMatch: 'full' }, // this will make your component the landing page!
  { path: 'landing', component: LandingPage }
  { path: 'socios', component: SociosComponent }
];

export const routing = RouterModule.forRoot(appRoutes);

So this would make your routing work as you want, meaning when you click the hyperlink, you will be routed to a new page! :) As said, check the tutorial and the plunker on

Tour of Heroes - Routing

There you can see the same setup, having a different app component with routerlinks and router-outlet, separate from the rest of your components!

EDIT: Working Plunker