24

我有两个组件。第一个组件包括模型列表，第二个组件包含模态表单我想在第一个组件内单击模型在第二个组件中，打开模态并编辑模型如何从父组件调用子组件中的显示功能

<ChildComponent />
<button onClick="@ShowModal">show modal</button>

@code{
    ChildComponent child; 

    void ShowModal(){
        child.Show();
    }
}

我用过@using，但这段代码有错误：

找不到类型或命名空间名称 ChildComponent

4

2 回答 2

53

首先，您需要捕获子组件的引用：

<ChildComponent @ref="child" />

然后，您可以像在代码中那样使用此引用来调用子组件方法。

<button onClick="@ShowModal">show modal</button>

@code{
    ChildComponent child; 

    void ShowModal(){
        child.Show();
    }
}

组件的命名空间需要在页面或 _Imports.razor 中通过 using 添加。如果您的组件位于子文件夹Components/ChildComponent.razor中，则其命名空间为 {YourAppNameSpace}.Components

@using MyBlazorApp.Components

阅读代码

于 2020-02-03T15:27:41.177 回答
2

这是我刚刚使用接口发布的一篇关于该主题的文章：

https://datajugglerblazor.blogspot.com/2020/01/how-to-use-interfaces-to-communicate.html

在此示例中，索引页是一个 IBlazorComponentParent 对象。

在登录组件上，最酷的部分是设置 Parent 属性，您只需设置 Parent=this：

在此处输入图像描述

它的工作方式是 Login 组件上 Parent 属性的 setter 调用父组件上的 Register 方法：

[Parameter]
public IBlazorComponentParent Parent
{
    get { return parent; }
    set 
    { 
        // set the parent
        parent = value;

        // if the value for HasParent is true
        if (HasParent)
        {
            // Register with the parent to receive messages from the parent
            Parent.Register(this);
        }
    }
}

然后在父组件或页面上，Register 方法存储对组件的引用：

public void Register(IBlazorComponent component)
{
    // If the component object and Children collection both exist
    if (NullHelper.Exists(component, Children))
    {
        // If this is the Login component
        if (component.Name == "Login")
        {
            // Set the Login control
            this.Login = component as Login;
        }

        // add this child
        Children.Add(component);
    }
}

此时，父页面和登录页面可以相互通信，因为它们都包含一个 ReceiveData 方法，您可以在其中发送消息。

于 2020-02-04T00:22:04.870 回答