Angular 2中如何在子组件中获取父组件名称？

嘿，这个需求在Angular 2里其实有几种实用的实现方式，我给你拆解两种最常用的方案：

Angular允许子组件直接注入父组件的实例，不过因为C2可能依附在C1或C3两种不同的父组件上，我们需要用@Optional()装饰器避免注入失败报错，再结合@Host()确保只注入直接父组件，最后通过实例判断确定当前父组件类型。

实现步骤： #

1. 在C2组件中，分别注入C1和C3的实例，加上@Optional()和@Host()装饰器
2. 在组件初始化逻辑或模板中，判断哪个父组件实例存在，再显示对应内容

代码示例： #

import { Component, OnInit, Optional, Host } from '@angular/core';
import { C1Component } from './c1.component';
import { C3Component } from './c3.component';

@Component({
  selector: 'app-c2',
  template: `
    <strong *ngIf="c1Parent">C1是我的父组件</strong>
    <strong *ngIf="c3Parent">C3是我的父组件</strong>
  `
})
export class C2Component implements OnInit {
  constructor(
    // 注入C1父组件，Optional表示找不到时不会报错
    @Optional() @Host() private c1Parent: C1Component,
    // 注入C3父组件
    @Optional() @Host() private c3Parent: C3Component
  ) { }

  ngOnInit(): void {
    // 如果一定要操作innerHTML（不推荐，有XSS风险），可以这样做
    // 记得用DomSanitizer处理内容，避免安全问题
    // if (this.c1Parent) {
    //   this.el.nativeElement.innerHTML = '<strong>C1是我的父组件</strong>';
    // } else if (this.c3Parent) {
    //   this.el.nativeElement.innerHTML = '<strong>C3是我的父组件</strong>';
    // }
  }
}

注意：直接操作innerHTML存在XSS安全风险，优先推荐用Angular模板的*ngIf语法绑定内容，更符合框架最佳实践。

如果希望C2组件更通用、和父组件解耦，可以用@Input()属性让父组件主动传递标识，这种方式不需要依赖父组件的具体类，灵活性更强。

实现步骤： #

1. 在C2组件中定义一个@Input()属性，比如parentType
2. C1和C3在引用C2时，分别传入对应的标识值（比如'c1'或'c3'）
3. C2根据传入的parentType显示对应内容

代码示例： #

C2组件：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-c2',
  template: `
    <strong>{{ parentType === 'c1' ? 'C1是我的父组件' : 'C3是我的父组件' }}</strong>
  `
})
export class C2Component {
  // 接收父组件传递的标识
  @Input() parentType!: string;
}

C1模板中引用C2：

<app-c2 parentType="c1"></app-c2>

C3模板中引用C2：

<app-c2 parentType="c3"></app-c2>

方案选择建议： #

• 如果父组件类型固定、不需要C2复用，方案一更直接；
• 如果希望C2能适配更多父组件场景，方案二更通用，维护成本更低。

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