导航到另一个模块中的组件角度

编程问答 2022-07-26

问题描述

我有默认创建的app.component，这是一个按钮。当我单击它时，我要转到login.component。

这是我的app.module.ts文件

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

import { AppRoutingModule } from './app-routing/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,MatButtonModule,MainModule,AppRoutingModule],providers: [],bootstrap: [AppComponent],})
export class AppModule {}

这是我的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',children: [{ path: '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>

这里是stackblitz网址，用于检查代码Stackblitz

我的问题是，该链接已更改为localhost:4200/main/login，但视图未更改。

我该如何解决？

解决方法

这是CSS问题。向左分割和向右吐出不会在任何空间内提供登录组件。而是将您的主页（主页）（带有登录和注册按钮的页面）作为其自己的组件，并且仅在具有路由器出口的情况下进行拆分。

app.component.html 

<div class="split left">
  <div class="centered">
    <h1>Learn what you want.</h1>
    <h1>Teach what you love.</h1>
  </div>
</div>

<div class="split right">
  <router-outlet></router-outlet>
</div>

main-page.component.html 

<div class="centered">
    <div>
      <button mat-raised-button class="btn-default" [routerLink]="['/main/login']">Log in</button>
    </div>
    <div style="margin-top: 20px">
      <button mat-raised-button class="btn-default-transparent">Sign up</button>
    </div>
  </div>
,

所以问题不在CSS中

问题是我需要将所有组件分开并且仅在app.component.ts文件中拥有<router-outlet></router-outlet>。

,

我在这里为您创建了一个错误修复的版本：Stackblitz

您的问题是它已加载但位于app.component.html模板后面。 您为main创建了一个LoginComponent模块。如果您有多个模块，则最佳做法是使用我在演示中为您创建的延迟加载。此外，最好app-component（意味着主应用仅包含<router-outlet></router-outlet>，并且内容将从其他组件加载）。

angularangular2-routingjavascripttypescripttypescript