导航到另一个模块中的组件 (Angular)

Question

我有 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 {}

这是我的应用程序-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 url 检查代码 Stackblitz

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

我该如何解决这个问题？

Answer 1

这是一个 CSS 问题。左拆分右吐不给任何里面的登录组件space。相反，将您的主页 (main-page)（带有登录和注册按钮的页面）作为其自己的组件，并且仅具有路由器插座的拆分权。

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>

Answer 2

所以问题不在CSS

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

Answer 3

我在这里为您创建了一个 bug-fixed 版本：Stackblitz

您的问题是它已加载但落后于 app.component.html 模板。您为 LoginComponent 创建了一个 main 模块。当您有多个模块时，最佳做法是使用我在演示中为您创建的 Lazy Loading。此外，app-component 更好，意思是主应用只有 <router-outlet></router-outlet> 和其他组件的内容加载。

导航到另一个模块中的组件 (Angular)

Navigate to component in another module (Angular)

javascript

angular

typescript

angular2-routing