Ciclo de vida en componentes y parámetros

Les comparto una pequeña simplificación del código usando el operador (??)

    public override async Task SetParametersAsync(ParameterView parameters)
    {
        if (parameters.TryGetValue<string>(nameof(currentCountParameter), out var value))
            currentCountParameter = value ?? currentCountParameter;
    
        await base.SetParametersAsync(parameters);
    }

    protected override void OnInitialized()
    {
        currentCount = int.Parse(CounterFromQuery ?? "0");
        logger.LogInformation("Se inicia el componente");
    }

Un componente Blazor puede pasar por cinco etapas:

SetParameters: Esta etapa se activa cuando el componente se construye inicialmente (los parámetros aún no se han establecido) o cada vez que los parámetros del componente se actualizan desde la URL o desde el componente principal. Si se anula el método SetParametersAsync, no se deben utilizar los métodos OnParametersSet y OnParametersSetAsync.

Inicializado: Esta es la etapa en la que el componente está completamente construido y los parámetros están configurados.

ParametersSet: Como su nombre indica, esta etapa se activa cada vez que se actualizan los parámetros del componente desde la URL o desde el componente principal.

AfterRender: Se activa cuando el componente supera la etapa de inicialización o cuando se llama a StateHasChanged.

Dispose: Este es el paso final en el que se elimina el componente de la interfaz de usuario. Los desarrolladores deben limpiar los recursos para evitar fugas de memoria o comportamientos inesperados.

Hice un programa para sumar dos parámetros pasados por la URL

@* Los parametros se pasan por la url de la siguiente forma "<url>?primero=3&segundo=5" *@
@page "/counter"

<PageTitle>Sumar</PageTitle>

<h1>Sumador</h1>

<p>Los parametros se deben pasar por la url: <b>primero</b> y <b>segundo</b></p>
<p role="status">Primer valor: @firstValue</p>
<p role="status">Segundo valor: @secondValue</p>
<p role="status"><b>Resultado:</b> @resultado</p>

<button class="btn btn-primary" @onclick="Sumar">Sumar</button>

@code {
    [SupplyParameterFromQuery]
    [Parameter]
    public string? primero {get; set;}
    [SupplyParameterFromQuery]
    [Parameter]
    public string? segundo {get; set;}

    private int firstValue = 0;
    private int secondValue = 0;

    private int resultado = 0;

    protected override void OnInitialized()
    {
        firstValue = primero != null ? int.Parse(primero) : 0;
        secondValue = segundo != null ? int.Parse(segundo) : 0;
    }

    private void Sumar()
    {
        resultado = firstValue + secondValue;
    }
}

no es mucho codigo para capturar un simple parametro. Con todo respeto siento que microsoft hace cosas marcianas.

Eventos de Blazor:

SetParametersAsync: capturar parámetros que llegan al componente.
OnInitialized: Inicializar algunos datos.
OnAfterRenderaync: Se usa para ejecutar código después de que el componente se renderizó en el DOM.
OnParametersSet: Este evento se usa cuando se ha seteado o actualizado los parámetros que llegan al componente.
StateHasChanged: Es un método que notifica a Blazor que el estado de un componente ha cambiado y que debe renderizar nuevamente.

Si de pronto en Counter no se les aparece el botón, como a mi que no me aparecía, solo es que después de los corchetes del primer if, coloquen:

await base.SetParametersAsync(parameters);

Si no les funciona con **SupplyParameterFromQuery**, aqui dejo la correccion que me funciono: **1)** `@page "/counter" ` **2)** `public override async Task SetParametersAsync(ParameterView parameters)` `{` ` await base.SetParametersAsync(parameters);` `}`

A mi no me funciono el SetParametersAsync, comente toda esta seccion para que me funcionara el codigo (tal cual se muestra en el curso)

//public override async Task SetParametersAsync(ParameterView parameter)
//{

//    //if(parameter.TryGetValue<string>(nameof(currentCountParameter), out var value))
//    //{
//    //    if (value is not null)
//    //    {
//    //        currentCountParameter = value;
//    //    }
//    //}

//}

el método SetParametersAsync() al parecer no es necesario en el 2do caso de querystring

Cliclo de vida de los componentes de blazor:

SetParametersAsync
onInicializedAsync
onAfterRenderAsync
onParametersSetAsync
StateHasChanged

Para recibir parámetros por la url, solo debes escribir en @page “/counter” después de la ruta dentro de las llaves { } el nombre del parámetro a recibir. Ahora para hacerlo opcional solo coloca el carácter ? después del nombre del parámetro.

Recuerda crear una variable con el mismo nombre para guardar y procesar ese valor dentro del @code{ }

Este es mi codigo, la tengo 2 contadores uno incremental y otro decremental con ambos tipso de parametros, y si vienen valores invalidos queda el valor por default

@page "/counter/{counterStartParameter?}"
@inject ILogger<Counter> logger;

<PageTitle>Counter</PageTitle>

<h1>A Counter </h1>

<p role="status">Current count: @currentCount</p>
<p role="status">Secound Descendent Count: @secondCount </p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;
    private int secondCount = 100;

    [Parameter]
    public string? counterStartParameter { get; set; }

    [SupplyParameterFromQuery]
    [Parameter]
    public string? counterStartFromQuery { get; set; }

    public override async Task SetParametersAsync(ParameterView parameters)
    {
        logger.LogInformation("Dentro de SetParametersAsync");

        if (parameters.TryGetValue<string>(nameof(counterStartParameter), out var value)) 
        {
            counterStartParameter = value;
        }

        await base.SetParametersAsync(parameters);
    }

    protected override void OnInitialized()
    {
        int tempInt;
        logger.LogInformation("Dentro de OnInitialized");
        int.TryParse(counterStartParameter ?? currentCount.ToString(), out currentCount);
        var exist = int.TryParse(counterStartFromQuery, out tempInt);
        secondCount = exist ? tempInt : secondCount;
    }

    protected override void OnAfterRender(bool firstRender)
    {
        logger.LogInformation("Dentro de OnAfterRenderAsync");
    }

    protected override void OnParametersSet()
    {
        logger.LogInformation("Recibiendo parametros");
    }
    
    private void IncrementCount()
    {
        currentCount++;
        secondCount--;
    }
}