У меня есть кнопка:

<BSButton Color="Color.Info" @onclick="LoadCategoryDetailsModal">
     <i class="fal fa-plus-circle mr-1"></i>Add New Category
</BSButton>

У меня есть компонент:

<CategoryDetails CategoryDetailModalTitle="@categoryDetailModalTitle">
</CategoryDetails>

В компоненте у меня есть функция для переключения модальных (показать / скрыть); модал скрыт по умолчанию

@using BlazingShop.Services
@inject ICategoryService CategoryService

<BSModal @ref="CategoryDetailsModal" IsCentered="true">
    <BSModalHeader OnClick="@OnToggle">@CategoryDetailModalTitle</BSModalHeader>
    <BSModalBody><p>Modal body text goes here.</p></BSModalBody>
    <BSModalFooter>
        <BSButton Color="Color.Primary">Save Changes</BSButton>
        <BSButton Color="Color.Secondary" @onclick="@OnToggle">Close</BSButton>
    </BSModalFooter>
</BSModal>

@code {

    BSModal CategoryDetailsModal;

    [Parameter]
    public string CategoryDetailModalTitle { get; set; }

    void OnToggle(MouseEventArgs e)
    {
        CategoryDetailsModal.Toggle();
    }
}

Я пытаюсь переключить модальный из родительского компонента.

Не могли бы вы мне помочь ?

Когда я нажимаю на эту кнопку (в родительском компоненте):

<BSButton Color="Color.Info" @onclick="LoadCategoryDetailsModal">
    <i class="fal fa-plus-circle mr-1"></i>Add New Category
</BSButton>

Я хочу, чтобы эта функция внутри дочернего компонента:

CategoryDetailsModal.Toggle();
0
Alexandre Prod'Hon 27 Апр 2020 в 00:41

2 ответа

Лучший ответ

Эй, я просто нахожу ответ! Добавьте @ ref = "Modal" в свой компонент:

<CategoryDetails CategoryDetailModalTitle="@categoryDetailModalTitle" @ref="@Modal"></CategoryDetails>

В разделе @Code:

private CategoryDetails Modal { get; set; }

В методе при нажатии на кнопку:

 private void LoadCategoryDetailsModal()
    {
        category = new Category();
        categoryDetailModalTitle = "Add New Category";
        Modal.Toggle();
    }

Переключите это метод, который я сделал в компоненте Child:

public void Toggle()
    {
        CategoryDetailsModal.Toggle();
    }
0
Alexandre Prod'Hon 26 Апр 2020 в 23:06

Если в вашем родительском компоненте у вас есть дочерний компонент:

<CategoryDetails CategoryDetailModalTitle="@categoryDetailModalTitle"></CategoryDetails>

И кнопка:

<BSButton Color="Color.Info" @onclick="LoadCategoryDetailsModal"><i class="fal fa-plus-circle mr-1"></i>Add New Category</BSButton>

Затем вы можете определить метод с именем LoadCategoryDetailsModal, который выполняется, когда пользователь нажал на кнопку выше ... Метод LoadCategoryDetailsModal, я полагаю, должен содержать код, который должен переключать окно модели ... Вы можете сделать что-то вроде этого :

private void LoadCategoryDetailsModal()
{
   CategoryDetailsModalRef.Toggle();
} 

CategoryDetailsModalRef - это объект, который содержит ссылку на дочерний компонент CategoryDetails. Вот как вы добавляете атрибут @ref для захвата ссылки на компонент CategoryDetails:

<CategoryDetails @ref="CategoryDetailsModalRef" CategoryDetailModalTitle="@categoryDetailModalTitle"></CategoryDetails>

И в блоке @code вы определяете: CategoryDetails CategoryDetailsModalRef;

Обратите внимание, что в приведенном выше коде предполагается, что вы определили метод с именем Toggle () в компоненте CategoryDetails, роль которого заключается в переключении отображения модального окна, возможно, путем изменения логической переменной с true на false и наоборот.

Надеюсь это поможет...

1
enet 26 Апр 2020 в 23:12