我是 Web 开发和使用 Angular 的新手。我有一个登录组件，我想在点击登录按钮后从中转到另一个组件。它正在加载另一个组件，但发生的事情是它在同一页面中加载其他组件的数据，还查看以前的登录组件，但我需要在其他页面上使用它。
index.html
<body>
<app-loginpage>
<div id="loader"><img src="assets/img/loaderpreview.svg"></div>
</app-loginpage>
</body>
登录页面.component.html
<div class="text-center">
<button (click)="redirect()" class="btn btn-primary btn-lg loginbtn">
Login
</button>
<router-outlet *ngIf="loadcomponent"></router-outlet>
登录页面.component.ts
export class LoginpageComponent implements OnInit {
private loadcomponent = false;
name: string;
password: any;
constructor(private router: Router) { }
ngOnInit() {
}
redirect() {
this.loadcomponent = true;
}
应用程序路由.ts
const routes: Routes =[
{path:'',component:AdminLayoutComponent},
{
path: '',
redirectTo: 'table',
pathMatch: 'full',
},
{
path: '',
component: AdminLayoutComponent,
children: [
{
path: '',
loadChildren: () => import('./layouts/admin-layout/admin-layout.module').then(m => m.AdminLayoutModule)
}]
},
{
path: '**',
redirectTo: 'table'
}
];
@NgModule({
imports: [
CommonModule,
BrowserModule,
RouterModule.forRoot(routes),
],
exports: [
],
})
export class AppRoutingModule { }
我想在点击登录按钮后加载 AdminLayoutComponent 但在另一个页面上但它在同一页面上加载。以下是当前行为的屏幕截图:
This screenshot is while loading Login Component
如果犯了愚蠢的错误，我已经很抱歉了。哈哈
最佳答案
你可以把<router-outlet>在主应用程序模板(通常为 app.component.html )上，并渲染 <app-loginpage>仅在未登录时。类似于:
index.html
<body>
<app-root></app-root>
</body>
app.component.html
<app-loginpage *ngIf="!authenticated"></app-loginpage>
<router-outlet *ngIf="authenticated"></app-loginpage>
关于html - 我想在点击登录按钮后导航到另一个页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57016263/