27. Blazor项目发布与IIS部署

27.1 如果是Auto模版的项目,选择两个项目中的Server项目进行发布

27.2 服务器必要的运行时安装与配置

28.组件的引用

如果想在引用Blazor组件的同一个页面上的其他代码部分中再次甚至多次使用这个组件的引用,该怎么做呢?

28.1 组件引用的实现方法

在引用组件的地方,给组件增加一个属性:@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生命周期及之后)这些引用才不为空,在引用到这些可能还没有完成渲染的组件的地方一定要做非空判断和处理。而对于延迟类的则不需要过分关注这一点,因为它们只能在组件渲染完成后才会被调用到。

29.HTML元素的引用

在js中,我们要引用一个html元素,就可以使用元素的id属性值等方法,如js代码:

function changeToRed(id){
const el = document.getElementById(id);
el.style.backgroundColor = 'red';
}

29.1使用ElementReference类型来创建html元素引用

@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';
    }
}
posted on 2024-04-08 19:32  hrx521  阅读(83)  评论(0编辑  收藏  举报