Как вызвать метод дочернего компонента из родительского компонента в Blazor? - PullRequest
Новая
       37

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

3 голосов
/ 03 февраля 2020

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

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

@code{
    ChildComponent child; 

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

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

имя типа или пространства имен ChildComponent coud not found

Ответы [ 2 ]

5 голосов
/ 03 февраля 2020

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

<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

прочитайте код

0 голосов
/ 04 февраля 2020

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

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

В этом примере страница индекса представляет собой объект IBlazorComponentParent.

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

enter image description here

Способ это работает, если установщик для свойства 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, в который можно отправлять сообщения.

...