Angular中如何在继承BaseComponent的MyComponent中渲染其模板？

你的代码无法正常工作，核心原因是：Angular组件继承仅继承类的属性与方法，不会自动加载父组件的模板配置。BaseComponent中的@ViewChild('template')在MyComponent实例中会返回undefined——因为MyComponent的模板里并没有渲染BaseComponent的模板内容，自然找不到#template这个模板引用。

以下是几种可行的解决方案：

方案一：通过父组件实例获取模板引用 #

修改MyComponent的模板，先渲染BaseComponent的实例（它的模板仅包含ng-template，不会显示实际内容），再通过实例获取模板并渲染：

@Component({
  selector: 'app-my-component',
  template: `
    <!-- 渲染BaseComponent实例，仅用于获取模板引用 -->
    <app-base #baseInstance></app-base>
    <!-- 使用父组件实例的模板 -->
    <ng-container [ngTemplateOutlet]="baseInstance.template"></ng-container>
  `,
})
export class MyComponent extends BaseComponent {
  @ViewChild('baseInstance') baseInstance!: BaseComponent;
}

BaseComponent保持原代码不变即可。

方案二：提取共享模板常量复用 #

把BaseComponent的模板内容抽成独立常量，父子组件直接引用这个常量定义模板，既能复用内容，又能灵活扩展子类模板：

// 定义共享模板常量
export const BASE_TEMPLATE = `
  <div>Hello World</div>
`;

@Component({
  selector: 'app-base',
  template: BASE_TEMPLATE
})
export class BaseComponent {}

@Component({
  selector: 'app-my-component',
  template: `
    ${BASE_TEMPLATE}
    <!-- 这里添加MyComponent的自定义内容 -->
    <div>我的自定义内容</div>
  `,
})
export class MyComponent extends BaseComponent {}

方案三：直接渲染父组件完整视图 #

如果BaseComponent的模板是完整的可渲染视图（不需要用ng-template包裹），直接在MyComponent的模板中使用父组件选择器即可：

@Component({
  selector: 'app-base',
  template: `<div>Hello World</div>`
})
export class BaseComponent {}

@Component({
  selector: 'app-my-component',
  template: `
    <app-base></app-base>
    <!-- 自定义内容 -->
  `,
})
export class MyComponent extends BaseComponent {}

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