Blazor - Component parameters

July 12, 2019

若想讓 Blazor component 在畫面上使用時帶上參數做些設定，可以為 Component 加上 Parameter。

只要在 code 區塊中加入帶有 ParameterAttribute 的 property 即可。

...
@code{
    ...
    [Parameter]
    private int IncrementAmount { get; set;     } = 1;
    ...
}

在畫面上就可以透過 Component parameter 對 Component 做些設定。

...
<Counter IncrementAmount="10" />
...

像是 Blazor 範本的 Counter component 可以改成像下面這樣:

@page "/counter"


<h1>Counter</h1>


<p>Current count: @currentCount</p>


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


@code {
    int currentCount = 0;


    [Parameter]
    private int IncrementAmount { get; set; } = 1;


    void IncrementCount()
    {
        currentCount += IncrementAmount;
    }
}

加入 IncrementAmount parameter 供外部設定，IncrementCount 方法會依照 IncrementAmount 的值去增加 currentCount。

Component parameter 開好後，畫面可直接設定 Parameter 的值。像是這邊設定 IncrementAmount 為 10。

@page "/"


<h1>Hello, world!</h1>


Welcome to your new app.


<Counter IncrementAmount="10" />

運行後按下 Counter component 的按鈕。

Counter 的值就會加 10。

Blazor