Пример. Как избежать перезаписи параметров
Toggle (Expanded
)=True
привет Expander 1 content
Toggle (Expanded
)=True
привет
Toggle (expanded
= True)
Expander 1 content
Toggle (expanded
= True)
Исходный код
------------\Pages\Parametr\ExpanderExample.razor:
-----------------------------
<code>Не рекомендуется к применению потому что, используется доступное поле</code>
<Expander Expanded=true>
Expander 1 content
</Expander>
<Expander Expanded="true" />
<hr />
<use>Рекомендуется к применению потому что, управление происходит через событие</use>
<Expander2 Expanded="true">
Expander 1 content
</Expander2>
<Expander2 Expanded="true" />
@*Уведомляет компонент об изменении его состояния. Когда это применимо, это будет
вызвать повторную визуализацию компонента.*@
<button @onclick="StateHasChanged">
Вызван метод "StateHasChanged", он уведомляет компонент об изменении.<br />
Если это применимо, будет выполнена повторная визуализация компонента.
</button>
-----------------------------\Shared\Parameter\Expander.razor
<div @onclick="Tuggle" class="card bg-light mb-3" style="width:30rem">
<div class="card-body">
<h2 class="card-text">Toggle (<code>Expanded</code>)=@Expanded</h2>
@if (Expanded)
{
<p>привет @ChildContent</p>
}
</div>
</div>
@code {
[Parameter]
public bool Expanded { get; set; }
[Parameter]
public RenderFragment ChildContent { get; set; }
void Tuggle()
{
Expanded = !Expanded;
}
}
---------------------------\Shared\Parameter\Expander2.razor:
<div @onclick="Toggle" class="card bg-light mb-3" style="width:30rem">
<div class="card-body">
<h2 class="card-title">Toggle (<code>expanded</code> = @expanded)</h2>
@if (expanded)
{
<p class="card-text">@ChildContent</p>
}
</div>
</div>
@code {
private bool expanded;
[Parameter]
public bool Expanded { get; set; }
[Parameter]
public RenderFragment ChildContent { get; set; }
protected override void OnInitialized()
{
expanded = Expanded;
}
private void Toggle()
{
expanded = !expanded;
}
}