如何通过@Input装饰器从父组件Dashboard传递baseurl给子组件？

问题背景 #

需要从父组件Dashboard向路由加载的子组件SpecimenComponent传递baseurl，要求后续仅修改<router-outlet>标签中的baseurl值即可完成更新，子组件已通过@Input() baseurl = '';准备接收该值。当前父组件中<router-outlet baseurl='MY_API_URL'>的写法无法实现传值，因为<router-outlet>不支持直接为路由加载的组件绑定输入属性。

实现步骤 #

1. 修改父组件Dashboard模板 #

为<router-outlet>添加激活事件监听，并将baseurl值作为参数传入事件处理方法：

<div class="layout-wrapper" [ngClass]="containerClass">
  <app-topbar></app-topbar>
  <div class="layout-main-container">
    <div class="layout-main">
      <!-- 后续直接修改此处的'MY_API_URL'即可更新baseurl -->
      <router-outlet (activate)="onComponentActivate($event, 'MY_API_URL')"></router-outlet>
    </div>
    <app-footer></app-footer>
  </div>
  <app-config></app-config>
</div>

2. 实现父组件的事件处理方法 #

在Dashboard组件类中编写onComponentActivate方法，判断激活的组件类型并传递baseurl：

import { Component } from '@angular/core';
import { SpecimenComponent } from './specimen/specimen.component'; // 替换为子组件实际路径

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html'
})
export class DashboardComponent {
  containerClass = ''; // 保留原有组件变量

  onComponentActivate(component: any, baseUrl: string): void {
    // 仅为SpecimenComponent设置baseurl
    if (component instanceof SpecimenComponent) {
      component.baseurl = baseUrl;
    }
  }
}

3. 子组件接收值（无需修改） #

子组件已通过@Input定义接收属性，可直接使用：

export class SpecimenComponent implements OnInit { 
  @Input() baseurl = '';

  ngOnInit(): void {
    // 在此处使用baseurl进行后续处理
    console.log('Received baseurl:', this.baseurl);
  }
}

说明 #

<router-outlet>是Angular的路由占位符，并非组件容器，无法直接通过标签属性为路由加载的组件传递@Input值。通过(activate)事件监听组件加载完成，手动为目标组件赋值，既能满足“仅修改<router-outlet>标签即可更新”的要求，又能确保值正确传递。

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