导航到另一个模块（Angular）中的组件答案

【问题标题】：Navigate to component in another module (Angular)导航到另一个模块（Angular）中的组件
【发布时间】：2021-01-03 23:50:42
【问题描述】：

我有默认创建的 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 url来检查代码Stackblitz

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

我该如何解决这个问题？

【问题讨论】：

标签： javascript angular typescript angular2-routing

【解决方案1】：

这是一个 CSS 问题。 split left 和 spit right 不会在任何空间内给登录组件。相反，将您的主页（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>

【讨论】：

好的。我让它工作，但它在同一页面上打开。我需要登录才能成为带有 URL 的新页面 - /main/login
所以你必须使用window object ``` window.open(url, '_blank'); ``` Angular 路由器可用于在同一窗口选项卡中导航。
我找到了没有window.open的解决方案

【解决方案2】：

所以问题不在 CSS 中

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

【讨论】：

所有组件都不需要。请参阅我在 stackblitz 上的演示，了解如何使用延迟加载和定义 rout.module

【解决方案3】：

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

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

【讨论】：