我有一个简单的应用程序 我在尝试导航到路线时遇到问题。 我的主要组成部分:
@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 发生变化但 View 未显示，可能是哪里出了问题？
最佳答案
我“不小心”发现了这个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 change in the browser but the view is not displayed，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36094599/