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>

当我点击按钮时，地址栏中的网址会发生变化但视图没有显示，可能出现什么问题？

Answer 1

我“意外地”发现了这个问题的Answer

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类已经声明了“ROUTER_PROVIDERS”，那么我需要从每个组件中删除它们，某些操作无声地失败：导航或hashbang（如原始答案中所示）以及其他可能的东西..

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

1 个答案: