从[Microsoft]的角度来观察和比较Blazor与Angular

2 年 ago

文, 翔

1 minute

Blazor已经正式发布了，这个消息（带有很大的误解）突然成为了议论的话题。
由于个人喜欢Angular，所以我想了解一下在Blazor中所能实现的与Angular相同的功能。

组件

Angular 组件和 Blazor 组件几乎是相同的意思。
通过准备组件来构建屏幕。

我整理了我想到的东西。

比較項目AngularBlazorコンポーネントを構成するものクラス、テンプレートHTML、（必要に応じて）スタイルシートRazorファイルひとつコンポーネント専用のスタイルシート持てる持てない¹他コンポーネントからの参照<app-foo></app-foo>のようなタグで参照できます<Foo></Foo>のようなタグで参照できます値のバインディングテンプレート中に{{foo}}と書くことで、変数を参照できますテンプレート中に@fooと書くことで、変数を参照できますフォームとのバインディングタグに[(ngModel)]をつけます。あるいはリアクティブフォームを使いますタグに @bind 属性をつけますライフサイクル画面遷移時にインスタンスが生成/破棄される← 同左（？）スタイルシートSCSS、CSSが使えます別途設定しない場合はCSSのみ(?)

表格和输入验证

在Angular的情况下

通过给标签添加属性（在模板驱动的情况下）或使用FormGroup（在响应式表单的情况下），可以使其变为Valid/Invalid的状态。

在Blazor情况下

通过为绑定的变量添加注解，可以将具有该输入项目的整个表单设置为有效/无效状态。

可以在模板中使用的控制结构

对于Angular的情况来说

Switch Case

在Blazor中

由于Razor能够直接编写C#代码，因此与C#是一样的。

组件之间的数据共享

在Angular的情况下

创建服务类并进行组件注入。

在Blazor的情况下

创建一个自定义类，并将其作为单例注册到DI容器中。通过在组件上写入 @inject，可以实现依赖注入。

路由

在Angular的情况下

将路径和组件的组合传递给RouterModule。

在Blazor的情况下

在组件开头使用 @page 来指定路径。

对现有的HTML标签进行扩展

Angular可以将现有的HTML标签声明为组件。此外，还可以使用指令来给标签添加特殊功能作为属性。

在Blazor中似乎没有类似的东西。

常用的第三方库。

ライブラリAngularBlazorテストKarma, Jasmine, Spectator 等xUnit 等状態管理NGRX, Akita、NGSX 等(?)マテリアルデザインAngular Material 等(?)

印像

由于Blazor的功能较少且简单，因此学习成本似乎较低。

用@符号的写法相当混乱，总觉得很有Microsoft的风格。

日本的软件工程师非常喜欢的网格控件，已经有很多第三方公司推出了。看起来可以立即使用。

请参考以下链接。

Road map for .NET 5

目前似乎还没有为组件准备的样式表。具体实现情况也不明确。你可以参考以下链接了解关于GrapeCity和Infragistics的Blazor UI组件。