Angular路由问题：如何让目标组件仅在访问对应URL时显示并接收父组件参数

你遇到的问题其实是Angular路由使用的典型误区——直接在根组件模板中硬编码目标组件，导致它始终被渲染，而不是仅在匹配路由时加载。下面分两步帮你解决：

第一步：调整路由配置，让组件按需路由加载 #

首先，你需要确保目标组件app-compeleted-component是通过路由规则来渲染，而不是直接写在app.component.html里。

1. 改造根组件模板 #

修改app.component.html，移除你之前添加的<app-compeleted-component>标签，只保留路由出口（这是Angular渲染路由匹配组件的容器）：

<!-- app.component.html -->
<router-outlet></router-outlet>

2. 配置路由规则 #

打开app-routing.module.ts（如果没有这个文件，可通过ng generate module app-routing --flat --module=app命令生成），配置路由映射：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
// 导入组件：建议把原app.component的首页内容移到单独的HomeComponent
import { HomeComponent } from './home/home.component';
import { AppCompletedComponent } from './app-compeleted-component/app-compeleted-component.component';

const routes: Routes = [
  // 访问根路径(http://localhost:4200/)时渲染首页组件
  { path: '', component: HomeComponent },
  // 访问目标路径时渲染带模态框的组件
  { path: 'app-compeleted-component', component: AppCompletedComponent },
  // 可选：添加404 fallback路由
  { path: '**', redirectTo: '' }
];

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

小提示：如果没有HomeComponent，可以用ng generate component home快速创建，然后把原app.component.html里的首页内容迁移到home.component.html中。

这样配置后，只有当你访问http://localhost:4200/app-compeleted-component时，AppCompletedComponent才会被渲染到router-outlet中，彻底解决“提前显示”的问题。

第二步：实现从首页到目标组件的数据传递 #

因为现在目标组件是路由加载的，不再是HomeComponent的直接子组件，原来的@Input绑定就失效了，这里提供两种常用解决方案：

方案一：通过路由参数传递简单数据 #

如果要传递的是字符串、数字这类简单数据，用路由查询参数最直接：

1. 在HomeComponent中，导航时携带参数：

import { Router } from '@angular/router';

export class HomeComponent {
  parentMessage = '你要传递的内容';

  constructor(private router: Router) {}

  // 绑定到按钮点击或其他触发事件
  goToCompletedPage() {
    this.router.navigate(['/app-compeleted-component'], {
      queryParams: { childMessage: this.parentMessage }
    });
  }
}

2. 在AppCompletedComponent中接收参数：

import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';

export class AppCompletedComponent {
  childMessage: string;
  private querySub: Subscription;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    // 订阅路由参数变化
    this.querySub = this.route.queryParams.subscribe(params => {
      this.childMessage = params['childMessage'];
      // 把数据传给模态框组件（比如通过@Input绑定）
    });
  }

  ngOnDestroy() {
    // 取消订阅防止内存泄漏
    this.querySub.unsubscribe();
  }
}

方案二：用共享服务传递复杂数据 #

如果要传递对象、数组这类复杂数据，或者需要灵活共享组件状态，推荐使用Angular服务：

1. 创建共享服务：

// data-sharing.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class DataSharingService {
  // BehaviorSubject会保存当前值，新订阅者能立即收到最新数据
  private messageSubject = new BehaviorSubject<string>('');
  currentMessage$ = this.messageSubject.asObservable();

  // 更新数据的方法
  updateMessage(message: string) {
    this.messageSubject.next(message);
  }
}

2. 在HomeComponent中发送数据：

import { Router } from '@angular/router';
import { DataSharingService } from '../data-sharing.service';

export class HomeComponent {
  parentMessage = '需要传递的复杂内容';

  constructor(
    private router: Router,
    private dataService: DataSharingService
  ) {}

  goToCompletedPage() {
    // 先更新服务中的数据
    this.dataService.updateMessage(this.parentMessage);
    // 再导航到目标路由
    this.router.navigate(['/app-compeleted-component']);
  }
}

3. 在AppCompletedComponent中接收数据：

import { DataSharingService } from '../data-sharing.service';
import { Subscription } from 'rxjs';

export class AppCompletedComponent {
  childMessage: string;
  private dataSub: Subscription;

  constructor(private dataService: DataSharingService) {}

  ngOnInit() {
    // 订阅服务中的数据变化
    this.dataSub = this.dataService.currentMessage$.subscribe(message => {
      this.childMessage = message;
      // 传递给模态框组件
    });
  }

  ngOnDestroy() {
    this.dataSub.unsubscribe();
  }
}

最后，在AppCompletedComponent的模板中，把数据通过@Input传给模态框组件即可：

<!-- app-compeleted-component.component.html -->
<app-modal [modalContent]="childMessage"></app-modal>

这样就完美实现了“仅访问目标URL时显示组件”+“数据传递”的需求啦！

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