ルートに移動しようとすると問題が発生する単純なアプリがあります。私の主なコンポーネント：
@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が変わりますが、ビューが表示されません。何が問題になる可能性がありますか？
私は「偶然に」別の質問のためにこの答えを見つけました
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」を宣言している場合は、すべてのコンポーネントからそれらを削除する必要があります。ナビゲーション、ハッシュバン（元の回答のように）など、一部の操作はサイレントに失敗します。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加