当 routerLink 到其他组件时，Angular 路由器也会加载先前的组件答案

【问题标题】：Angular router loads previous component as well when routerLink to other component当 routerLink 到其他组件时，Angular 路由器也会加载先前的组件
【发布时间】：2020-01-26 03:34:56
【问题描述】：

我有一个带有注册按钮的登录页面，当点击该按钮时会转到/sign-up，我的预期行为是 /sign-up 仅显示注册组件，但页面也在加载注册组件和登录组件，如下图所示。 [注册页面][1] 我不希望也加载登录组件。 [1]：https://i.stack.imgur.com/GyTo4.png 我尝试在内部组件等之前，之后移动，但是我得到相同的结果，我该如何解决这个问题？代码如下

app.component

<router-outlet></router-outlet>
<app-signin></app-signin>

app-routing.module

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { NewPostComponent } from './components/new-post/new-post.component'
import { SigninComponent } from './components/signin/signin.component'
import { SignupComponent } from './components/signup/signup.component'


const routes: Routes = [
  { path: 'sign-in', component: SigninComponent },
  { path: 'sign-up', component: SignupComponent },
  { path: 'new-post', component: NewPostComponent }
];

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

signin.component

<div class="container border signin">
  <div class="row">
    <div class="col">
      <img
        src="../../../assets/signin-img.jpg"
        alt="signin image"
        class="img-fluid"
      />
    </div>
    <div class="col form-group">
      <h1>Login</h1>
      <form>
        <div class="">
          <input type="text" placeholder="Email" class="form-control" />
          <br />
          <input type="password" placeholder="Password" class="form-control" />
          <br />
          <button type="submit" class="btn btn-primary">Submit</button>
          <button class="btn btn-primary" routerLink="/sign-up">Signup</button>
        </div>
      </form>
    </div>
  </div>
</div>

注册组件

<div class="container border">
<div class="row">
    <div class="col">
      <img src="../../../assets/signin-img.jpg" alt="signin image" class="img-fluid" />
    </div>
    <div class="col">
        <h1>Registration Info</h1>
      <form>
        <div class="">
          <input type="text" placeholder="Name" class="form-control">
          <br>
          <input type="date" placeholder="Birthday" class="form-control">
          <br>
          <select class="form-control">
            <option value="" disabled selected>Gender</option>
            <option value="male">Male</option>
            <option value="female">Female</option>
            <option value="trangender">Transgender</option>
            <option value="other">Other</option>
            <option value="noMention">Prefer not to mention</option>
          </select> 
          <br>
          <input type="email" placeholder="Email" class="form-control">
          <br>
          <label>Password</label>
          <br>
          <input type="password" placeholder="Confirm Password" class="form-control">
        </div>
      </form>
    </div>
  </div>
  </div>

【问题讨论】：

从 app.component.html 中移除 sing-in 组件
那什么都不会显示，现在尝试使用重定向来管理它

标签： angular routes

【解决方案1】：

更多的 Hack 而不是解决方案，如果有人能弄清楚这一点或解释我做错了什么，那就太好了。

为登录添加了重定向表单库

{ path: '', redirectTo: 'sign-in', pathMatch: 'full' },

app.component 只包含这个

<router-outlet></router-outlet>

这似乎有效

【讨论】：