執行導航方法后，上一個組件不會消失。我的新組件出現在舊組件的底部。我應該怎么做才能單獨顯示新的導航組件？當我直接重定向到新組件時，會顯示空白視圖。為了生成我使用的組件ng g c componentName。導航：this.router.navigate(['dashboard'], {relativeTo: this.route});新組件：export class DashboardComponent implements OnInit { constructor() { } ngOnInit() { }}路由器：const routes: Routes = [ { path : "dashboard", component : DashboardComponent}, {path : "**", component: PageNotFoundComponent}]@NgModule({ imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})], exports: [RouterModule]})export class AppRoutingModule { }export const routingComponents =[DashboardComponent, PageNotFoundComponent]項目結構：模板<div class="bg"> <div class="container"> <div class="row"> <div class='col-md-3'></div> <div class="col-md-6"> <div class="login-box well"> <legend>Sign In</legend> <div class="form-group"> <input id="username-email" placeholder="E-mail or Username" type="text" [(ngModel)]="username" class="form-control" /> </div> <div class="form-group"> <input id="password" placeholder="Password" type="text" class="form-control" [(ngModel)]="password"/> </div> <div class="input-group"> <div class="checkbox"> <label> <input id="login-remember" type="checkbox" name="remember" [(ngModel)]="remember"> Remember me </label> </div> </div>
1 回答
動漫人物
TA貢獻1815條經驗 獲得超10個贊
根據您目前提供的信息，您似乎一直在嘗試從登錄頁面導航到儀表板。
您仍然可以看到登錄頁面字段以及底部的儀表板內容。
這是有道理的，因為路由器將在router-outlet. 但是您的登錄組件不是加載到router-outlet.
在這種情況下，您將創建一個包含以下內容的 LoginComponent：
<div class="bg">
<div class="container">
<div class="row">
<div class='col-md-3'></div>
<div class="col-md-6">
<div class="login-box well">
<legend>Sign In</legend>
<div class="form-group">
<input id="username-email" placeholder="E-mail or Username" type="text" [(ngModel)]="username" class="form-control" />
</div>
<div class="form-group">
<input id="password" placeholder="Password" type="text" class="form-control" [(ngModel)]="password" />
</div>
<div class="input-group">
<div class="checkbox">
<label>
<input id="login-remember" type="checkbox" name="remember" [(ngModel)]="remember"> Remember me
</label>
</div>
</div>
<div class="form-group">
<input (click)="loginButtonClick()" id="login_button" class="btn btn-default btn-login-submit btn-block m-t-md" value="Login" />
</div>
<span class='text-center'><a href="/resetting/request" class="text-sm">Forgot Password?</a></span>
</div>
</div>
<div class='col-md-3'></div>
</div>
</div>
</div>
然后你的 RouterConfig 看起來像這樣：
const routes: Routes = [{
path: "dashboard",
component: DashboardComponent,
canActivate: [CanActivateDashboard], // This is a guard that you'll have to add
},
{
path: "login",
component: LoginComponent
},
{
path: "**",
component: PageNotFoundComponent
}
]
@NgModule({
imports: [RouterModule.forRoot(routes, {
onSameUrlNavigation: 'reload'
})],
exports: [RouterModule]
})
export class AppRoutingModule {}
export const routingComponents = [DashboardComponent, PageNotFoundComponent]
默認情況下，您將加載/login路由，您的用戶將通過該路由在視圖中看到 LoginComponent 的內容。由于現在將使用 Router 加載它，并且內容將加載到 上<router-outlet>，因此一旦用戶導航到路由，只會DashboardComponent將內容加載到 上。<router-outlet>/dashboard
PS：請注意，未經授權的用戶應該無法直接導航到/dashboard. 因此，您還必須創建一個Guard以防止這種情況發生。
- 1 回答
- 0 關注
- 129 瀏覽
添加回答
舉報
0/150
提交
取消