Blazor继承模板组件时如何从父页面正确调用子组件的ToggleDisplay方法

问题根因 #

你当前的实现存在实例不匹配的问题：
PetDog虽然继承了PetTemplate类，但你在PetDog.razor中又单独声明了一个<PetTemplate>标签，这会生成两个完全独立的PetTemplate实例：

• 你在Index页面通过@ref拿到的PetDog实例，调用的是它自身继承得到的父类ToggleDisplay方法，修改的是这个实例对应的display字段
• 页面上实际渲染的是PetDog内部嵌套的那个PetTemplate实例，它的display字段完全没有被触发修改，所以外部按钮点击看不到效果

解决方案 #

提供两种常用的修复方式，你可以根据自己的业务需求选择：

方案1：直接复用继承的父组件渲染逻辑（推荐）

既然你已经让PetDog继承了PetTemplate，不需要额外嵌套一层<PetTemplate>标签，直接复用父类的渲染逻辑即可，修改PetDog.razor代码：

@inherits PetTemplate
@{
    // 给父组件参数赋值
    base.Name = "Dog";
    base.ChildContent = @<div>Someone's best friend!</div>;
    // 调用父类渲染方法输出内容
    base.BuildRenderTree(__builder);
}

修改完成后无需改动其他代码，Index页面的外部按钮即可正常调用ToggleDisplay控制显隐。

方案2：保留嵌套写法，代理方法到内部实例

如果你一定要保留现有的嵌套写法，只需要在PetDog中代理方法到内部的PetTemplate实例即可，修改PetDog.razor代码：

@inherits PetTemplate

<PetTemplate @ref="_innerPetTemplate" Name="Dog">
    <div>Someone's best friend!</div>
</PetTemplate>

@code {
    private PetTemplate _innerPetTemplate;

    // 覆盖父类方法，调用内部实例的对应方法
    public new void ToggleDisplay()
    {
        _innerPetTemplate.ToggleDisplay();
    }
}

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