Question

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

这是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],
  providers: [],
  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”

我如何正确设置路由？

Answer 1

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

app-routing.module.ts

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

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

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

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

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

从应用模块导航到子模块

1 个答案: