Angular路由异常：点击按钮后组件嵌入父组件而非独立显示

你的问题根源在于AppComponent模板中除了<router-outlet>外，还包含了<app-login>、分隔标签和按钮这些固定内容。Angular的路由组件会渲染在<router-outlet>的位置，所以这些固定内容会和路由组件同时显示，看起来像是嵌入效果。要实现点击按钮后显示独立的EmptyRoomComponent页面，需要调整路由结构，让AppComponent仅作为路由容器。

步骤1：创建HomeComponent #

首先生成一个新的组件来承载原来AppComponent中的登录和按钮内容：

ng generate component home

步骤2：修改路由配置（app.routing.module.ts） #

更新路由数组，添加根路径''的路由，指向新建的HomeComponent：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {EmptyRoomComponent} from "./components/empty-room/empty-room.component";
import { HomeComponent } from './home/home.component'; // 导入HomeComponent

const routes: Routes = [
  { path: '', component: HomeComponent }, // 根路径指向HomeComponent
  { path: 'empty', component:EmptyRoomComponent},
  { path: '**', redirectTo:''}
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { enableTracing: true })],
  exports: [RouterModule]
})

export class AppRoutingModule { }

步骤3：迁移模板内容 #

• 将app.component.html中的所有内容（除了<router-outlet>）剪切到home.component.html中：
  home.component.html内容：

<app-login></app-login>
<label class="or">------ LUB ------</label>
<div class="container unlogged">
  <button class="unlogged" routerLink="/empty">Utwórz pokój</button>
</div>

• 修改app.component.html，只保留路由出口：

<router-outlet></router-outlet>

步骤4：确保HomeComponent在AppModule中声明 #

检查app.module.ts，确认HomeComponent已添加到declarations数组中（使用ng generate命令会自动添加，若手动创建则需手动导入并声明）：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './components/login/login.component';
import { ReactiveFormsModule} from "@angular/forms";
import {EmptyRoomComponent} from "./components/empty-room/empty-room.component";
import { HomeComponent } from './home/home.component'; // 导入HomeComponent

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    EmptyRoomComponent,
    HomeComponent // 添加到声明数组
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

完成以上操作后，点击按钮访问/empty路径时，<router-outlet>会渲染EmptyRoomComponent，而原来的登录和按钮内容（现在在HomeComponent中）会被替换，从而实现独立页面的效果。

内容的提问来源于stack exchange，提问作者Aneta Roj