« Blazor component » : différence entre les versions
De Banane Atomic
Aller à la navigationAller à la recherche
| Ligne 105 : | Ligne 105 : | ||
= [https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-5.0#capture-references-to-components Capture references to components] = | = [https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-5.0#capture-references-to-components Capture references to components] = | ||
Component references provide a way to reference a component instance for issuing commands. | Component references provide a way to reference a component instance for issuing commands. | ||
<filebox fn='Pages/Index.razor'> | |||
<MyComponent @ref="myComponent" /> | |||
<button @onclick="@(() => myComponent.MyMethod())"> | |||
Call <code>MyComponent.MyMethod</code> | |||
</button> | |||
@code { | |||
private MyComponent myComponent; | |||
} | |||
</filebox> | |||
= [https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-5.0#attribute-splatting-and-arbitrary-parameters Attribute splatting and arbitrary parameters] = | = [https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-5.0#attribute-splatting-and-arbitrary-parameters Attribute splatting and arbitrary parameters] = | ||
Version du 25 juillet 2021 à 16:09
Links
Basic component
| Components/MyComponent.razor |
<h1>Test</h1> <p>@ChildContent</p> |
| Components/MyComponent.razor.cs |
public partial class MyComponent : ComponentBase
{
[Parameter]
public RenderFragment ChildContent { get; set; }
}
|
| Components/MyComponent.razor.css |
h1 {
color: coral;
}
|
| Pages/Index.razor |
@page "/"
@using Component.Components
<MyComponent>
test !!!
</MyComponent>
|
Callback event
| Components/MyComponent.razor.cs |
[Parameter]
public EventCallback<string> Callback { get; set; }
private string description;
private async Task UpdateDescription()
{
await Callback.InvokeAsync(description);
}
|
| Pages/Index.razor |
<MyComponent Callback="MyComponentCallback" />
@code {
void MyComponentCallback(string description)
{
}
}
|
Binding with component parameters
| Components/MyComponent.razor.cs |
[Parameter]
public string Description { get; set; }
// name of the EventCallback has to be [PropertyName]Changed
[Parameter]
public EventCallback<string> DescriptionChanged { get; set; }
private async Task UpdateDescription()
{
await DescriptionChanged.InvokeAsync(description);
}
|
| Pages/Index.razor |
@* two ways binding of the component parameter Description with the local field description *@
<MyComponent @bind-Description="description" />
@code {
private string description = "Text";
}
|
Cascading values and parameters
Set a value for the component hierarchy from an ancestor component to any number of descendent components.
| Pages/Index.razor |
@* BtnStyle will be available in MyComponent and all its descendent components *@
<CascadingValue Value="btnStyle" IsFixed="true">
<MyComponent />
</CascadingValue>
@code {
string btnStyle = "btn-success";
}
|
| Components/MyComponent.razor.cs |
// match between the cascading value and the cascading parameter is made by the type (string) and not by the property name
[CascadingParameter]
public string BtnStyle { get; set; }
|
Ensure cascading parameters are fixed
If the IsFixed value is true (false by default), then receipients receive the initial value but do not set up any subscription to receive updates. In this case, each [CascadingParameter] is lightweight and no more expensive than a regular [Parameter].
So wherever possible, you should use IsFixed="true" on cascaded values. You can do this whenever the value being supplied doesn't change over time.
Capture references to components
Component references provide a way to reference a component instance for issuing commands.
| Pages/Index.razor |
<MyComponent @ref="myComponent" />
<button @onclick="@(() => myComponent.MyMethod())">
Call <code>MyComponent.MyMethod</code>
</button>
@code {
private MyComponent myComponent;
}
|
Attribute splatting and arbitrary parameters
|
@* without attribute splatting, use individual parameters *@
<input maxlength="@maxlength"
placeholder="@placeholder"
required="@required"
size="@size" />
@* with attribute splatting, use a dictionary of attributes *@
<input @attributes="InputAttributes" />
@code {
private string maxlength = "10";
private string placeholder = "Input placeholder text";
private string required = "required";
private string size = "50";
private Dictionary<string, object> InputAttributes { get; set; } =
new()
{
{ "maxlength", "10" },
{ "placeholder", "Input placeholder text" },
{ "required", "required" },
{ "size", "50" }
};
}
|
