什么是 blazor 根组件？
lon*_*nix 3 c# asp.net-core blazor blazor-webassembly
blazor 模板有这样的：
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");
我知道什么App是 和HeadOutlet是什么（它们在文档中都有介绍）。
一般都有哪些RootComponents？
我也可以添加自己的组件吗？（这些可能是什么类型的组件？）
RootComponent 一般是什么？
渲染器需要渲染树的起始节点。那是根组件。一个 WASM 应用程序可以有一个或多个。证明描述可能更容易。
从 WebAssembly 模板创建一个项目。
这是修改后的index.html。注意额外的 htmlDiv和Span元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>BlazorApp1</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="BlazorApp1.styles.css" rel="stylesheet" />
</head>
<body>
<div id="counter"></div>
<span id="useless"></span>
<div id="app">Loading...</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss"></a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
</body>
</html>
运行它，没有什么不同。
现在修改Program以告诉应用程序映射Counter到具有适当 id 的 html 元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>BlazorApp1</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="BlazorApp1.styles.css" rel="stylesheet" />
</head>
<body>
<div id="counter"></div>
<span id="useless"></span>
<div id="app">Loading...</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss"></a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
</body>
</html>
您现在拥有三个 RenderTree。
我也可以添加自己的组件吗？（这些可能是什么类型的组件？）
任何实现的类都IComponent可以是根组件。
这是一个演示：
using BlazorApp1;
using BlazorApp1.Pages;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");
builder.RootComponents.Add<Counter>("#counter");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
await builder.Build().RunAsync();
并更新Program
public class TotallyUselessComponent : IComponent
{
private RenderHandle _renderHandle;
public void Attach(RenderHandle renderHandle)
=> _renderHandle = renderHandle;
public Task SetParametersAsync(ParameterView parameters)
{
_renderHandle.Render((builder) =>
{
builder.AddMarkupContent(0, $"<div class='alert alert-danger m-3'>I'm here but I'm totally Useless.</div>");
}
);
return Task.CompletedTask;
}
}
您得到的内容的屏幕截图。
- 考虑一个混合/混合应用程序。出于某种原因，你想混合使用 React、.... 和 Blazor。您还希望分步从 Asp.net 或 Razor 服务器端应用程序迁移。不适合我，但是...我看到你获得了 10K 分。:-)。 (2认同)
| 归档时间： |
|
| 查看次数： |
1894 次 |
| 最近记录： |