angular - Angular 2/4: Routing is not working

Question

My routing

   RouterModule.forRoot([
            { path: 'login', component: LoginComponent },
            { path: 'home', component: HomeComponent },
        ])

In app component I have this.router.navigate(['home']); This doesn't navigate me to home component.

When I routed to login page, my left nav is also displayed.

My app.component.ts

<div class='container-fluid'>
    <div class='row'>

        <div class='col-sm-3'>
            <nav-menu></nav-menu>
        </div>

        <div class='col-sm-9 body-content'>
            <router-outlet>
                <input style="float:right" placeholder="Search" autofocus>
            </router-outlet>
        </div>

    </div>
</div>

Answer 1

这个错误通常是这个错误。

您之前加载了许多其他模块，因此其中一个已经定义了一个空路径，因此路由器不会将您的路由放置到您的模块。（您的模块导入的顺序很重要）。如果您延迟加载此模块，请检查其他延迟加载模块的顺序，然后检查您将 RoutingModule 放入模块的顺序（此处的顺序很重要）。Angular 官方文档建议将此作为第一，第一个匹配 url 的路由会被渲染。

Answer 2

试试这个：

创建名为 app.routing.ts 的新文件

import { LoginComponent } form ...
import { HomeComponent } from ..

export const routing = RouterModule.forRoot([
    { path: 'login', component: LoginComponent },
    { path: 'home', component: HomeComponent }   
]);

//And Finaly in app.module.ts
//include the constant like this
import { routing } from './app.routing';

......

@NgModule({
   imports: [routing]
});