web-dev-qa-db-ja.com

ブレザーの親コンポーネントから子コンポーネントメソッドを呼び出す方法

2つのコンポーネントがあります。最初のコンポーネントにはモデルのリストが含まれ、2番目のコンポーネントにはモーダルフォームが含まれています最初のコンポーネント内でモデルをクリックしたい2番目のコンポーネントでモーダルを開き、モデルを編集します親コンポーネントから子コンポーネントのshow関数を呼び出す方法

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

@code{
    ChildComponent child; 

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

私は@usingを使用していますが、このコードにはエラーがあります：

タイプまたは名前空間名ChildComponentが見つかりません

blazorasp.net-blazor
8
reza malekmohamadi

これは、インターフェイスを使用してこの件について投稿した記事です。

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

この例では、インデックスページはIBlazorComponentParentオブジェクトです。

ログインコンポーネントのクールな部分は、Parentプロパティを設定することです。Parent= thisを設定するだけです。

enter image description here

これが機能する方法は、LoginコンポーネントのParentプロパティのセッターが、親の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メソッドが含まれているため、互いに通信できます。

1
Data Juggler