Basi c Компонент наследования блэйзера

Question

Допустим, у большинства моих компонентов есть заголовок. Я хочу создать базовый компонент, который имеет переменную заголовка и сделать все другие компоненты наследовать от этого компонента и установить заголовок. Итак, у меня есть

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"
    }
}

Это компилируется и отображается без ошибок, но базовый заголовок не отображается. Как будто что-то в базе не отображается. Что я делаю не так?

PS

Я также попробовал @layout BaseComponent, и даже обе директивы одновременно.

Answer 1

Это никогда не будет работать так, как вы показываете, потому что установка свойства для родительского компонента из внутреннего не запускает рендеринг. AFAIK правильный подход к этой проблеме состоит в том, чтобы иметь независимый класс обслуживания, который содержит некоторое общее состояние (в вашем случае, текущий заголовок страницы), и внедрить его в каждый компонент, который должен изменить его, с помощью действий события:

Это было бы что-то вроде этого:

public class GlobalUtilities
{
    public string MainPageTitle { get; private set; } = "Home (default value)";

    public event Action OnMainTitleChanged;

    public void SetMainTitle(string text)
    {
        MainPageTitle = text;
        OnMainTitleChanged.Invoke();
    }
}

Зарегистрируйте его в конвейере в Startup.cs:

services.AddScoped<UtilsGlobales>();

оно должно быть зарегистрировано как область действия, поскольку его время жизни в паре с текущим соединением.

А затем используйте его на всех необходимых вам компонентах-потомках:

Компонент

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

@inject GlobalUtilities gu

<p>Something here</p>

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

Надеюсь, это поможет!