首頁(yè) 猿問(wèn) 執(zhí)行導(dǎo)航方法后，上一個(gè)組件不會(huì)消失

執(zhí)行導(dǎo)航方法后，上一個(gè)組件不會(huì)消失

C#

BIG陽(yáng) 2023-04-29 18:10:43

執(zhí)行導(dǎo)航方法后，上一個(gè)組件不會(huì)消失。我的新組件出現(xiàn)在舊組件的底部。我應(yīng)該怎么做才能單獨(dú)顯示新的導(dǎo)航組件？當(dāng)我直接重定向到新組件時(shí)，會(huì)顯示空白視圖。為了生成我使用的組件ng g c componentName。導(dǎo)航：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]項(xiàng)目結(jié)構(gòu)：模板<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 回答

動(dòng)漫人物

TA貢獻(xiàn)1815條經(jīng)驗(yàn) 獲得超10個(gè)贊

根據(jù)您目前提供的信息，您似乎一直在嘗試從登錄頁(yè)面導(dǎo)航到儀表板。

您仍然可以看到登錄頁(yè)面字段以及底部的儀表板內(nèi)容。

這是有道理的，因?yàn)槁酚善鲗⒃趓outer-outlet. 但是您的登錄組件不是加載到router-outlet.

在這種情況下，您將創(chuàng)建一個(gè)包含以下內(nèi)容的 LoginComponent：

</div>

</div>

<label>

<input id="login-remember" type="checkbox" name="remember" [(ngModel)]="remember"> Remember me

</label>

</div>

</div>

<span class='text-center'><a href="/resetting/request" class="text-sm">Forgot Password?</a></span>

</div>

</div>

然后你的 RouterConfig 看起來(lái)像這樣：

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]

默認(rèn)情況下，您將加載/login路由，您的用戶將通過(guò)該路由在視圖中看到 LoginComponent 的內(nèi)容。由于現(xiàn)在將使用 Router 加載它，并且內(nèi)容將加載到上<router-outlet>，因此一旦用戶導(dǎo)航到路由，只會(huì)DashboardComponent將內(nèi)容加載到上。<router-outlet>/dashboard

PS：請(qǐng)注意，未經(jīng)授權(quán)的用戶應(yīng)該無(wú)法直接導(dǎo)航到/dashboard. 因此，您還必須創(chuàng)建一個(gè)Guard以防止這種情況發(fā)生。

反對(duì) 回復(fù) 2023-04-29