0

我有一个按钮：

<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();
4

2 回答 2

1

如果在您的父组件中有一个子组件：

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

还有一个按钮：

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

然后，您可以定义一个名为 LoadCategoryDe​​tailsModal 的方法，该方法在用户单击上面的按钮时执行......我猜，LoadCategoryDe​​tailsModal 方法应该包含应该切换模型窗口的代码......你可以做这样的事情：

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

CategoryDe​​tailsModalRef 是一个包含对 CategoryDe​​tails 子组件的引用的对象。这是添加 @ref 属性以捕获对 CategoryDe​​tails 组件的引用的方式：

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

在您定义的@code 块中：CategoryDetails CategoryDetailsModalRef;

请注意，上面的代码假定您在 CategoryDe​​tails 组件中定义了一个名为 Toggle() 的方法，其作用是切换模式窗口的显示，可能通过将布尔变量从 true 更改为 false ，反之亦然。

希望这可以帮助...

于 2020-04-26T23:12:38.907 回答
0

嘿，我刚刚找到答案！在 Component 中添加 @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();
    }

切换它是我在子组件中创建的方法：

public void Toggle()
    {
        CategoryDetailsModal.Toggle();
    }
于 2020-04-26T23:06:45.940 回答