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

這似乎有效