Angular 2: url 浏览器改变但视图不显示

Question

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

    @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 { ...
    ...

我有一个基本组件

@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);
    }
..
}

我在主页上添加了基本 Href 'index.html'

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

当我点击按钮时，地址栏中的 url 发生变化，但视图不显示，可能是哪里出了问题？

Answer 1

我 "accidentally" 找到这个另一个问题

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 class 已经声明 "ROUTER_PROVIDERS" 那么我需要从每个组件中删除它们，一些操作会默默地失败：导航，或 hashbang（如原始答案）和其他东西..

Angular 2: url 浏览器改变但视图不显示

Angular 2: url change in the browser but the view is not displayed

angular

angular2-routing