1

在我的代码中，当多次打开 MatSnackBar 时，SnackBar 中显示的内容不会像我认为的那样更新。例子：

@page "/"

    <div> count value: @count </div>
    <MatButton OnClick="ButtonClick">Open</MatButton>
    <MatSnackbar @bind-IsOpen="@snackBarIsOpen">
        <MatSnackbarContent>Count: @count</MatSnackbarContent>
        <MatSnackbarActions>
            <MatButton Raised="true" @onclick="() => { snackBarIsOpen = false; }" >Close</MatButton>
        </MatSnackbarActions>
    </MatSnackbar>

    @code
    {
        bool snackBarIsOpen = false;
        int count = 0;

        void ButtonClick()
        {
            snackBarIsOpen = true;
            count++;
            this.StateHasChanged();
        } 
    }

多次单击按钮时，SnackBar 始终显示“计数：1”。我究竟做错了什么？

4

1 回答 1

0

当您第一次运行您的主页时，唯一可见的元素是 MatButton。看不到 MatSnackbar 是因为它的参数属性值为 false：

@bind-IsOpen="@snackBarIsOpen"

bool snackBarIsOpen = false;

当您单击 MatButton 时，将执行 ButtonClick 事件处理程序snackBarIsOpen == true，并且 MatSnackbar 组件被“重新渲染”。但是现在组件的 IsOpen 参数值为 true，因此它与 MatSnackbarContent 组件的内容一起显示。下面是执行此操作的代码：

BaseMatSnackbar.cs（注意评论是我的……）

[Parameter]
        public bool IsOpen
        {
            get => _isOpen;
            set
            {
                // When the component is created the value of IsOpen is false 
                // and the parameter value passed to it is also false, so the 
                // code within the if block is not executed.
                if (IsOpen != value)
                {
                    _isOpen = value;
                    // After clicking the MatButton IsOpen != value, and thus 
                    // this code is executed by JavaScript to display the 
                    // component
                    CallAfterRender(async () =>
                    {
                        await JsInvokeAsync<object>("matBlazor.matSnackbar.setIsOpen", Ref, value);
                    });
                }
            }
        }

下次点击 MatButton 时IsOpen == value，上面的 if 块没有执行，条件是IsOpen != value，也就是说，如果组件已经显示了，为什么要显示它。

现在，每当您点击 MatButton 时，局部变量都会递增，但 MatSnackbarContent 的内容在第一次单击后保持不变：“Count: 1”，换句话说，MatSnackbarContent 组件不会使用新值重新渲染数数。

我将在这里发布一些相关的代码，也许您可​​以对这些组件有所了解。我对MatBlazor不熟悉，我宁愿先学习Blazor的核心......

https://github.com/SamProf/MatBlazor/blob/master/src/MatBlazor.Web/src/matSnackbar/matSnackbar.js

https://github.com/SamProf/MatBlazor/blob/master/src/MatBlazor/Components/MatSnackbar/MatSnackbar.razor

https://github.com/SamProf/MatBlazor/blob/master/src/MatBlazor/Components/MatSnackbar/BaseMatSnackbar.cs

希望这可以帮助...

于 2019-10-21T15:15:31.013 回答