Komponente, die Standardparameter auf andere Komponenten anwendet

Question

Ich verwende Blazorise, das mehrere Basiskomponenten wie <Button>mehrere Parameter bereitstellt . Ich möchte eine einfache Komponente erstellen, die eine <Button>mit einem oder zwei fest codierten Parametern rendert (z. B. Color="Colors.Primary")und dann den Rest der Parameter an die übergibt <Button>.

Das möchte ich schreiben können:

<PrimaryButton Outline>Text</Button>

Ich möchte dies erreichen, ohne alle von <Button>in verfügbaren Parameter manuell einstellen zu müssen PrimaryButton.razor. Ich habe seit einiger Zeit nach einer Möglichkeit gesucht, kann aber nichts finden. Ist es überhaupt möglich?

Ich habe bereits versucht, von zu erben Buttonund zu schreiben, <Button @attributes="@Attributes" Color="Colors.Primary">aber die impliziten Parameter werden verworfen.

Answer 1

Ich denke, Sie müssen sie immer noch als Parameter übergeben, indem Sie sie Ihrer benutzerdefinierten Komponente hinzufügen. Zum Beispiel könnten Sie eine Schaltfläche mit Colorund Outlinesetzen, aber den BlockParameter weitergeben.

/* PrimaryButton.razor */
<Button Color="Color.Primary" Outline="true" Block="@Block">@ChildContent</Button>

@code {
  [Parameter] public bool Block { get; set;}
  [Parameter] public RenderFragment ChildContent { get; set; }
}

Sie können diese neue Komponente dann als verwenden

<PrimaryButton Block="true">Some Text</PrimaryButton>

Answer 2

Hierfür können Sie "Attribute Splatting" verwenden

Angenommen, Ihre Basiskomponente ist definiert

<h1>Base Component</h1>
<div>Param1 = @Param1</div>
<div>Param2 = @Param2</div>
@code
{
    [Parameter] public string Param1 { get; set; }
    [Parameter] public string Param2 { get; set; }
}

Wenn Sie Param1 vorab ausfüllen möchten, erstellen Sie eine neue MyComponent

<BaseComponent Param1="predefined" @attributes=Attributes/>
@code
{
  [Parameter(CaptureUnmatchedValues=true)] 
  public Dictionary<string,object> Attributes { get; set; }       
}

Jetzt können Sie MyComponent anstelle von BaseComponent verwenden. Wenn Sie keinen Wert für Param1 angeben, wird dieser vordefiniert (in diesem Fall buchstäblich dieser Wert).

Also dieses Markup:

<BaseComponent Param1="base" Param2="component"/>

<MyComponent Param1="my" Param2="component"/>

<MyComponent Param2="component"/>

Erzeugt diese Ausgabe:

Basiskomponente

Param1 = Basis Param2 = Komponente

Basiskomponente

Param1 = meine Param2 = Komponente

Basiskomponente

Param1 = vordefinierte Param2 = Komponente

Sehen Sie sich ein Live-Beispiel auf BlazorRepl an: https://blazorrepl.com/repl/QEvucNFB408fLIXd18