RouterLink in Angular 2 RC.6 not redirecting

Mike3355 Published at Dev

Mike3355

My issue is I want my navigation bar to be on every page. In my app.component.ts I have the following:

@Component({
    selector: 'my-app',
    template: `
         <nav-bar></nav-bar>
         <home></home>
         <router-outlet></router-outlet>
`
})
export class AppComponent {

}

First here is my routes.config.ts file:

   const appRoutes: Routes = [

    {path:'home', component: HomeComponent, useAsDefault: true},
    {path:'login', component: LoginComponent}

];

export const appRoutingProviders: any = [

];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

Now at it will render the way I want it to. However once I click on Login I want it to redirect me to a different page, but it leaves me on the <home></home> page and scatters my login forms input, labels and button around in random places.

I want to click on Login and go to a whole new page.

@Component({
    moduleId: module.id,
    selector: 'login',
    templateUrl:'./login.html'
})

If you look at my GIT link my HTML files are in frontend->build then it should be easy to figure it out from there.

Git Link GITHUB LINK

micronyks

The problem is when you click Login link, it still shows Home view.Right?

You just to need to change you AppComponent View to this,

@Component({
    selector: 'my-app',
    template: `
         <nav-bar></nav-bar>
         <home></home>                          //<<<===removed home selector from this line.
         <router-outlet></router-outlet>
`
})
export class AppComponent {

}

You also need to change routes to shown below,

const appRoutes: Routes = [

    {path:'', redirecTo:'home',  pathMatch: 'full'}  //<<<===added this
    {path:'home', component: HomeComponent },
    {path:'login', component: LoginComponent}

];

Collected from the Internet

Please contact [email protected] to delete if infringement.