Angular 10路由

编程问答 2022-11-12

问题描述

我刚刚使用最新的nrwl工作区生成了一个新的角度项目。我做了一个简单的登录屏幕，您可以在其中登录。现在没有验证，我只想在Button单击时切换页面。但是我的问题从这里开始。

单击按钮后，URL更改为localhost：4200 / dashboard。但是我的组件没有被渲染，路由器出口一切正常。我在网上搜索并将我必须做的所有事情添加到我的应用程序路由模块和ts中。我认为这是一个小错误，但我找不到它。

它们看起来像这样：

应用程序路由模块：

  import { NgModule } from '@angular/core';

import { Routes,RouterModule } from '@angular/router';
import {DashboardComponentComponent} from "../../../../libs/moniesta-dashboard/src/lib/dashboard-component/dashboard-component.component";

const routes: Routes = [
  {path: 'dashboard',component: DashboardComponentComponent}


];

@NgModule({
  imports: [RouterModule.forRoot(routes)],exports: [RouterModule],})
export class AppRoutingModule { }

App-Module：

import { browserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { browserAnimationsModule } from '@angular/platform-browser/animations';
import { NbThemeModule,NbLayoutModule } from '@nebular/theme';
import { NbEvaIconsModule } from '@nebular/eva-icons';
import { AppRoutingModule } from './app-routing.module';
import {MoniestaAuthorisationModule} from "@moniesta/moniesta-authorisation";
import {MoniestaDashboardModule} from "@moniesta/moniesta-dashboard";

@NgModule({
  declarations: [AppComponent],imports: [browserModule,browserAnimationsModule,NbThemeModule.forRoot({ name: 'default' }),NbLayoutModule,NbEvaIconsModule,AppRoutingModule,MoniestaAuthorisationModule,MoniestaDashboardModule],providers: [],bootstrap: [AppComponent],})
export class AppModule {}

登录名：

@Component({
  selector: 'moniesta-login-component',templateUrl: './login-component.component.html',styleUrls: ['./login-component.component.scss']
})
export class LoginComponentComponent implements OnInit {
  userName = new FormControl('');
  password = new FormControl('');
  constructor(
    private router: Router,private route: ActivatedRoute
  ) { }

  ngOnInit(): void {
  }


  loginValidation(){
    this.router.navigate(['dashboard']);

  }

}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularnrwl-nxroutestypescripttypescript