Question

比方说，我的大多数组件都有一个标头。我想创建一个具有header变量的基本组件，并使所有其他组件从该组件继承并设置header。所以我有

BaseComponent

@inherits LayoutComponentBase;

<h1>@header</h1>

@Body

@code {

    protected string header;
}

组件

@inherits BaseComponent;

"internal component text"

@code {
  protected override void OnInitialized()
    {
         base.header = "Setting header for the parent"
    }
}

这将编译并没有错误地显示，但基本头没有显示。就像基础中的任何东西都没有被渲染一样。我在做什么错了？

P.S。

我也尝试过@layout BaseComponent，甚至同时尝试了两个指令。

Answer 1

在撰写本文时，派生的razor组件自动实现其基类的所有方法，包括BuildRenderTree（呈现您在razor文件中键入的HTML标记）。当您不键入任何内容时，该方法将不会尝试自行调用基本BuildRenderTree方法。因此，您需要像这样手动进行操作：

@inherits BaseComponent;

@{
    base.BuildRenderTree(__builder);
}

@code {
  protected override void OnInitialized()
    {
         base.header = "Setting header for the parent"
    }
}

Answer 2

它永远不会以您显示的方式工作，因为从内部组件在父组件上设置属性不会触发渲染。 AFAIK解决此问题的正确方法是拥有一个具有某些公共状态（在您的情况下为当前页面标题）的独立服务类，并通过事件操作的含义将其注入到需要更改它的每个组件上：

那将是这样的：

services.AddScoped<UtilsGlobales>();

在Startup.cs的管道中注册它：

//No need to inherit, only inject...
// @inherits BaseComponent;

@inject GlobalUtilities gu

<p>Something here</p>

@code {
    protected void OnInitialized()
    {
        gu.SetMainTitle("Whatever you want");
    }
}

应该将其注册为作用域，因为它的生命周期已与当前连接配对。

然后在所需的所有后代组件上使用它：

组件

title

希望有帮助！

基本组件布局继承类

2 个答案: