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

Question

我有一个带有注册按钮的登录页面，当点击它时路由到 /sign-up，我的预期行为是 /sign-up 只显示注册组件，但页面也在加载注册 - up 组件和登录组件，如下图所示。 注册页面我不希望也加载登录组件。 我尝试在内部组件之前、之后移动，但是我得到了相同的结果，我该如何解决这个问题？ 下面的代码

应用组件

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

登录组件

<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>

Answer 1

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

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

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

app.component 只包含这个

<router-outlet></router-outlet>

这似乎有效