как вызвать метод дочернего компонента из родительского компонента в Blazor?

Question

У меня два компонента. Первый компонент включает список моделей, а второй компонент содержит модальную форму. Я хочу щелкнуть модель внутри первого компонента. Во втором компоненте откройте модальное окно и отредактируйте модель, как вызвать функцию показа в дочернем компоненте из родительского компонента.

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

@code{
    ChildComponent child; 

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

Я использую @using, но в этом коде есть ошибка:

не найден тип или имя пространства имен ChildComponent

Answer 1

Сначала вам нужно записать ссылку на свой дочерний компонент:

<ChildComponent @ref="child" />

Затем вы можете использовать эту ссылку для вызова методов дочерних компонентов, как вы это делаете в своем коде.

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

@code{
    ChildComponent child; 

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

Пространство имен вашего компонента необходимо добавить с помощью либо на странице, либо в _Imports.razor. Если ваш компонент находится в подпапке Components/ChildComponent.razor, то его пространство имен - {YourAppNameSpace}.Components

@using MyBlazorApp.Components

прочтите код

Answer 2

Вот статья, которую я только что опубликовал на эту тему, используя интерфейсы:

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

В этом примере страница индекса - это объект IBlazorComponentParent.

В компоненте входа в систему самое интересное - установить свойство Parent, вы просто устанавливаете Parent=this:

Он работает так: установщик свойства Parent в компоненте Login вызывает метод 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, с помощью которого вы можете отправлять сообщения.

Answer 3

Мне приходилось общаться между одним родителем <==> несколькими детьми. Дети были созданы в цикле foreach для списка, поэтому я не мог использовать ref как ответ от «agua from mars».

Ответ от «user12228709» казался пригодным для использования, но он был слишком громоздким для реализации со всеми интерфейсами и еще чем-то. Итак, я использовал тот же принцип, но упростил его, просто создав объект-посредник и позволив родителям/детям общаться через него.

Итак, создайте класс посредника, который имеет события и методы для вызова этих событий, что-то вроде

      public class Mediator
{
    public event EventHandler<string> SomethingChanged;
    public void NotifySomethingChanged()
    {
        Task.Run(() =>
        {
            SomethingChanged(this, "test");
        });
    }
}

А затем в @code родительского компонента создайте экземпляр и передайте его дочерним элементам в качестве параметра.

      <ChildComponent MediatorInstance="@MediatorInstance" />

@code
{
      Mediator MediatorInstance = new();

Конечно, ребенок получает это как параметр.

      @code
{
    [Parameter]
    public Mediator MediatorInstance{ get; set; }

Теперь возможна двусторонняя связь. Сторона, которая хочет сказать другим что-то сделать, вызывает такой метод, как NotifySomethingChanged, и получатели подписываются на соответствующие события при инициализации.