Angular 2/4：路由不起作用答案

【问题标题】：Angular 2/4: Routing is not workingAngular 2/4：路由不起作用
【发布时间】：2017-11-02 14:48:52
【问题描述】：

我的路线

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

在应用程序组件中，我有 this.router.navigate(['home']); 这不会将我导航到主组件。

当我路由到登录页面时，我的左侧导航也会显示。

我的 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>

【问题讨论】：

试试`this.router.navigate(['/home']);`
我看到网址更改为localhost:63547/home。但是显示的还是app.component.html
你放了吗<router-outlet></router-outlet>
this.router.navigate(['/home']);应该可以工作或发布您的组件详细信息。您也可以在 plunkr 上分享您的组件

标签： angular angular2-routing angular4-router

【解决方案1】：

这个错误通常是这个。

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

【讨论】：

【解决方案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]
});

【讨论】：