Question

在我的代码中，当多次打开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始终显示“ Count：1”。我在做什么错了？

Answer 1

首次运行主页时，唯一可见的元素是MatButton。无法看到MatSnackbar，因为其参数属性值为false：

@bind-IsOpen="@snackBarIsOpen"

bool snackBarIsOpen = false;

当您单击MatButton时，将执行snackBarIsOpen == true ButtonClick事件处理程序，并且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);
                    });
                }
            }
        }

下次单击IsOpen == value时，如果不执行Mat按钮，则上面的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

希望这对您有帮助...

MatSnackbar不更新MatSnackBarContent

1 个答案:

BaseMatSnackbar.cs（注意注释是我的...）