Aspnetcore: Build error ketika parameter dan komponen anak memiliki nama yang sama

Tambahkan dukungan untuk @tagHelperPrefix

Masalah

Implementasi Blazor v0.6.0 saat ini tidak memiliki dukungan untuk Razor @tagHelperPrefix

Dampak fungsional

Mencoba menyertakan komponen anak di dalam RenderFragment memiliki nama yang sama akan mengakibatkan kesalahan waktu kompilasi.

Langkah repro minimal

Misalkan kita memiliki komponen di Panel.cshtml sebagai berikut:

<div class="panel panel-default">
  <div class="panel-heading">@PanelHeader</div>
  <div class="panel-body">@PanelBody</div>
</div>

@functions{
  [Parameter] private RenderFragment PanelHeader { get; set; }
  [Parameter] private RenderFragment PanelBody { get; set; }
}

dan komponen lain di PanelHeader.cshtml seperti ini:

<div>@Title</div>
<div>@SubTitle</div>

@functions{
  [Parameter] private string Title { get; set; }
  [Parameter] private string SubTitle { get; set; }
}

kemudian menggunakan kedua komponen ini pada halaman seperti kode di bawah ini akan menghasilkan kesalahan waktu kompilasi:

<Panel>
  <PanelHeader>
       <PanelHeader Title="some title" SubTitle="sub title"></PanelHeader>
  </PanelHeader>
  <PanelBody>Some content ...</PanelBody>
<Panel>

Usul

Saya akan merekomendasikan untuk menambahkan dukungan untuk @tagHelperPrefix sehingga untuk menyederhanakan komponen yang berbeda dari RenderFragments.

Kode di atas kemudian dapat ditulis ulang sebagai berikut:

Panel.cshtml akan menjadi seperti ini:

<strong i="32">@tagHelperPrefix</strong> "pre1:"
<div class="panel panel-default">
  <div  class="panel-heading">@PanelHeader</div>
  <div  class="panel-body">@PanelBody</div>
</div>

@functions{
  [Parameter] private RenderFragment PanelHeader { get; set; }
  [Parameter] private RenderFragment PanelBody { get; set; }
}

Dan PanelHeader.cshtml akan terlihat seperti ini:

<strong i="37">@tagHelperPrefix</strong> "pre2:"
<div>@Title</div>
<div>@SubTitle</div>

@functions{
  [Parameter] private string Title { get; set; }
  [Parameter] private string SubTitle { get; set; }
}

Dan akhirnya komponen anak dan induk dapat digunakan seperti ini:

<pre1:Panel>
  <PanelHeader>
       <pre2:PanelHeader Title="some title" SubTitle="sub title"></pre2:PanelHeader>
  </PanelHeader>
  <PanelBody>Some content ...</PanelBody>
<pre1:Panel>