











如果想在引用Blazor组件的同一个页面上的其他代码部分中再次甚至多次使用这个组件的引用,该怎么做呢?
在引用组件的地方,给组件增加一个属性:@ref="_refComponent",其中 _refComponent 是用被引用的组件类型声明的一个C#变量。然后就可以在引用组件的页面上的其他地方多次使用该变量来调用组件。
如代码:
引用组件的页面:
@Page "/ref-Component"
<button class="btn btn-warning" @onclick="@(e=>_refComponent!.Toggle())">
@if(_refComponent is not null && _refComponent.Expand)
{
@("外部按钮控制展开")
}
else
{
@("外部按钮控制折叠")
}
</button>
</br>
<Collapse @ref="_refComponent">
这里是伸缩的内容
</Collapse>
@code
{
Collapse? _refComponent;
}
Collapse.razor 组件的页面:
所有组件的事件都是延迟类的,其他则为非延迟类也可以说是渲染类的。做这样的概念区分的目的在于:如果有一个组件的引用、或组件的成员的引用,那么对于它们来说只有组件渲染完成后(即OnAfterRender生命周期及之后)这些引用才不为空,在引用到这些可能还没有完成渲染的组件的地方一定要做非空判断和处理。而对于延迟类的则不需要过分关注这一点,因为它们只能在组件渲染完成后才会被调用到。
在js中,我们要引用一个html元素,就可以使用元素的id属性值等方法,如js代码:
function changeToRed(id){
const el = document.getElementById(id);
el.style.backgroundColor = 'red';
}
@Page "/html-ref"
<div> @onclick = "ChangeColor" @ref="_refDiv">
我是一个div
</div>
@inject IJSRuntime JS
@code
{
ElementRefrence? _refDiv;
async Task ChangeColor()
{
await JS.InvokeVoidAsync("changeColor",_refDiv);
}
}
app.js文件中的js代码
window.changeColor = function(element){
if(!element){
throw 'el is null';
el.style.backgroundColor='red';
}
}
此内容由惯性聚合(RSS阅读器)自动聚合整理,仅供阅读参考。 原文来自 — 版权归原作者所有。