从应用模块导航到子模块

编程问答 2022-08-12

问题描述

我有一个应用程序组件，我需要单击该按钮以导航到主组件中的登录屏幕。主要组件位于主模块中，是应用程序模块的子模块。

这是app.module.ts的样子

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {MatButtonModule} from '@angular/material/button';
import {MainModule} from  './main/main.module'
@NgModule({
  declarations: [
    AppComponent
  ],imports: [
    browserModule,AppRoutingModule,MatButtonModule,MainModule
  ],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }

这是main.module.ts 

import { browserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LoginComponent } from './login/login.component';

@NgModule({
  declarations: [LoginComponent],imports: [browserModule],bootstrap: [],})
export class MainModule {}

这是app-routing.module.ts 

    import { NgModule } from '@angular/core';
import { Routes,RouterModule } from '@angular/router';
import {LoginComponent} from './main/login/login.component'

const routes: Routes = [{path: './main/login',component: LoginComponent}];

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

在此定义登录组件的路径。

在组件中，我尝试像这样导航以登录 <button mat-raised-button class="btn-default" [routerLink]="['./main/login']">Log in</button>

但是出现此错误

错误错误：未捕获（承诺）：错误：无法匹配任何路由。网址段：“ main / login” 错误：无法匹配任何路线。网址段：“ main / login”

我如何正确设置路由？

解决方法

不应使用“。”定义路由。也不带“ /”前缀， 因此请考虑如下修改routes：

app-routing.module.ts 

const routes: Routes = [{
  path: "main",children: [
    { path: 'login',component: LoginComponent }
  ]
}]

下一步，如下修改您的登录按钮：

<button [routerLink]="['/main/login']">

可选地在同级路线上（主要为孩子）

<button [routerLink]="['./login']">
angularangular2-routingjavascriptroutestypescripttypescript