Blazor cung cấp cho chúng ta 1 vài cách để chia sẻ thông tin giữa các components. Bạn có thể sử dụng component parameters hoặc cascading parameters để gửi giá trị từ thành phần mẹ đến thành phần con. AppState pattern là một cách tiếp cận khác mà bạn có thể sử dụng để lưu trữ các giá trị và truy cập chúng từ bất kỳ component trong ứng dụng Blazor .
Chia sẻ thông tin giữa 2 components bằng component parameters
Trong ứng dụng web Blazor, mỗi component hiển thị một phần của HTML. Một số component hiển thị một trang hoàn chỉnh nhưng những component khác hiển thị các đoạn đánh dấu nhỏ hơn, chẳng hạn như table, form hoặc control. Nếu component của bạn chỉ hiển thị một phần của đánh dấu, bạn phải sử dụng nó làm child component trong parent component. child component của bạn cũng có thể là component gốc của các component khác, component nhỏ hơn hiển thị bên trong nó. Các component con còn được gọi là các component lồng nhau.
Trong hệ thống phân cấp các child component và parent component, bạn có thể chia sẻ thông tin giữa chúng bằng các sử dụng component parameters. Định nghĩa những parameters trong child components và sau đó set giá trị cho chúng từ parent component.
Ví dụ: nếu bạn có một thành phần con hiển thị ảnh bánh pizza, bạn có thể sử dụng một tham số thành phần để chuyển ID bánh pizza. Thành phần con tra cứu chiếc bánh pizza từ ID và lấy hình ảnh và các dữ liệu khác. Nếu bạn muốn hiển thị nhiều pizza khác nhau, bạn có thể sử dụng thành phần con này nhiều lần trên cùng một trang mẹ, chuyển một ID khác nhau cho mỗi con.
Bắt đầu định nghĩa component parameter trong child component. Bạn định nghĩa chúng là C# public property và [Parameter] attribute
<h2>New Pizza: @PizzaName</h2>
<p>@PizzaDescription</p>
@code {
[Parameter]
public string PizzaName { get; set; }
[Parameter]
public string PizzaDescription { get; set; } = "The best pizza you've ever tasted."
}
Bạn cũng có thể sử dụng các class tùy chỉnh trong dự án của mình làm component parameters. Hãy xem xét class topping:
public class PizzaTopping
{
public string Name { get; set; }
public string Ingredients { get; set; }
}
Bạn có thể sử dụng nó như một component parameters giống như một giá trị tham số để truy cập các thuộc tính riêng lẻ của lớp bằng cách sử dụng cú pháp dấu chấm:
<h2>New Topping: @Topping.Name</h2>
<p>Ingredients: @Topping.Ingredients</p>
@code {
[Parameter]
public PizzaTopping Topping { get; set; }
}
Trong parent component, hãy đặt các giá trị tham số bằng cách sử dụng các thuộc tính của các component’s tags. Đặt các thành phần đơn giản trực tiếp. Với một tham số dựa trên một lớp tùy chỉnh, hãy sử dụng mã C # nội tuyến để tạo một phiên bản mới của lớp đó và đặt các giá trị của nó:
@page "/pizzas-toppings"
<h1>Our Latest Pizzas and Topping</h1>
<Pizza PizzaName="Hawaiian" PizzaDescription="The one with pineapple" />
<PizzaTopping Topping="@(new PizzaTopping() { Name = "Chilli Sauce", Ingredients = "Three kinds of chilli." })" />
Chia sẻ thông tin giữa 2 components bằng
cascading parameters
Các Component parameters hoạt động tốt khi bạn muốn chuyển một giá trị ngay lập tức cho child Component . Mọi thứ trở nên khó xử khi bạn có một thứ bậc sâu sắc với con cái của những đứa trẻ, v.v. Tham số thành phần không được tự động chuyển cho các thành phần cháu từ các Component tổ tiên hoặc xuống sâu hơn trong hệ thống phân cấp. Để xử lý vấn đề này một cách thanh lịch, Blazor bao gồm cascading parameters (các tham số xếp tầng). Khi bạn đặt giá trị của một cascading parameters trong một Component, giá trị của nó sẽ tự động có sẵn cho tất cả các Component con ở bất kỳ độ sâu nào.
@page "/specialoffers"
<h1>Special Offers</h1>
<CascadingValue Name="DealName" Value="Throwback Thursday">
<!-- Bất kỳ thành phần con nào được hiển thị ở đây sẽ có thể truy cập Cascading Value . -->
</CascadingValue>
Trong các thành phần con, bạn có thể truy cập giá trị xếp tầng bằng cách sử dụng các thành phần và decorating chúng bằng thuộc tính [CascadingParameter].
<h2>Deal: @DealName</h2>
@code {
[CascadingParameter(Name="DealName")]
private string DealName { get; set; }
}
Chia sẻ thông tin bằng AppState
Một cách tiếp cận khác để chia sẻ thông tin giữa các thành phần khác nhau là sử dụng AppState pattern. Bạn tạo một lớp xác định các thuộc tính bạn muốn lưu trữ và đăng ký nó như một dịch vụ có phạm vi. Trong bất kỳ thành phần nào bạn muốn đặt hoặc sử dụng các giá trị AppState, bạn chèn dịch vụ và sau đó bạn có thể truy cập các thuộc tính của nó. Không giống như tham số thành phần và tham số xếp tầng, các giá trị trong AppState có sẵn cho tất cả các thành phần trong ứng dụng, ngay cả các thành phần không phải là con của thành phần đã lưu trữ giá trị.
Ví dụ: hãy tạo một lớp lưu trữ giá trị về doanh số bán hàng:
public class PizzaSalesState
{
public int PizzasSoldToday { get; set; }
}
Bây giờ, thêm lớp dưới dạng dịch vụ có phạm vi, trong tệp Program.cs:
...
// Add services to the container
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
// Add the AppState class
builder.Services.AddScoped<PizzaSalesState>();
...
Bây giờ, trong bất kỳ Component nào bạn muốn đặt hoặc truy xuất các giá trị AppState, hãy inject class và sau đó truy cập các thuộc tính:
@page "/"
@inject PizzaSalesState SalesState
<h1>Welcome to Blazing Pizzas</h1>
<p>Today, we've sold this many pizzas: @SalesState.PizzasSoldToday</p>
<button @onclick="IncrementSales">Buy a Pizza</button>
@code {
private void IncrementSales()
{
SalesState.PizzasSoldToday++;
}
}
theo: https://docs.microsoft.com/en-us/learn/modules/interact-with-data-blazor-web-apps/6-share-data-in-blazor-applications