Angular 角度2：在浏览器中更改url，但不显示视图_Angular_Angular2 Routing

Angular 角度2：在浏览器中更改url，但不显示视图

angular

Angular 角度2：在浏览器中更改url，但不显示视图,angular,angular2-routing,Angular,Angular2 Routing,我有一个简单的应用程序，当我尝试导航到一条路线时遇到问题。我的主要组成部分： @Component({ selector: 'my-app', template: ` <ul class="my-app"> <li> <a [routerLink]="['Login']">Login</a> </li> <li>

我有一个简单的应用程序，当我尝试导航到一条路线时遇到问题。我的主要组成部分：

    @Component({
    selector: 'my-app',
    template: `
    <ul class="my-app">
        <li>
            <a [routerLink]="['Login']">Login</a>    
        </li>
        <li>
            <a [routerLink]="['Projects']">Projects</a>  
        </li>
    </ul> 
     <br>
    <router-outlet></router-outlet>`,
    directives: [ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS]
})
@RouteConfig([
    {
        path: '/Login',
        name: 'Login',
        component: LoginFormComponent,
        useAsDefault: false
    },
    {
        path: '/Projects',
        name: 'Projects',
        component: ListProjectsComponent,
        useAsDefault: true
    }
 ])

    export class AppComponent { ...
    ...

@组件({
选择器：“我的应用程序”，
模板：`


登录


项目




`,
指令：[路由器指令]，
提供者：[路由器提供者]
})
@线路图([
{
路径：'/Login'，
名称：'登录'，
组件：LoginFormComponent，
useAsDefault:false
},
{
路径：'/Projects'，
名称：'项目'，
组件：ListProjectsComponent，
useAsDefault:true
}
])
导出类AppComponent{。。。
...

我有一个基本的组成部分

@Component({
    selector: 'login-form',
    template: 
      `
        <button (click)="goToProjects()">Go To Projects!</button>
      `,
    directives: [ROUTER_DIRECTIVES],
    providers: [LoginService, ROUTER_PROVIDERS]
})

export class LoginFormComponent implements OnInit {
...
 goToProjects(){
         let link = ['Projects',{}];
         this.router.navigate(link);
    }
..
}

@组件({
选择器：“登录表单”，
模板：
`
进入项目！
`,
指令：[路由器指令]，
提供者：[登录服务，路由器提供者]
})
导出类LoginFormComponent实现OnInit{
...
goToProjects（）{
让link=['Projects'，{}]；
这个.路由器.导航（链接）；
}
..
}

我将基本Href添加到主页“index.html”

<head>
    <base href="/">
  </head>

当我单击按钮时，地址栏中的url会更改，但视图不会显示，可能会出现什么问题？

我“意外”发现这是另一个问题

bootstrap(
    TestComponent, 
    [
        ROUTER_PROVIDERS, 
        // must be listed after `ROUTER_PROVIDERS`
        provide(LocationStrategy, { useClass: HashLocationStrategy }) // not  interested in this just in the original answer 
    ]
);

providers: [ROUTER_PROVIDERS] // <-- ** delete this line this is what worked!**
from LoginComponent

bootstrap(
测试组件，
[
路由器供应商，
//必须在“路由器”之后列出`
provide（LocationStrategy，{useClass:HashLocationStrategy}）//仅在原始答案中对此不感兴趣
]
);
提供者：[路由器提供者]//奇怪的是，当我实现此解决方案时，它似乎起了作用，但现在我所有的页面加载速度都非常慢，而且越来越慢。在导航中单击第三次时，我正在等待5-10秒，等待视图更新。此路由器\u提供程序已贬值。是否有关于新替代方案的更新？问题是我的url更改，但组件未加载，我也没有引导，我有材料。建议？