Blazor - Component parameters

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


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

1
2
3
4
5
6
7
...
@code{
...
[Parameter]
private int IncrementAmount { get; set; } = 1;
...
}


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

1
2
3
...
<Counter IncrementAmount="10" />
...


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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
@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。

1
2
3
4
5
6
7
8
9
10
@page "/"


<h1>Hello, world!</h1>


Welcome to your new app.


<Counter IncrementAmount="10" />


運行後按下 Counter component 的按鈕。


Counter 的值就會加 10。