angular - Hur man kommer åt en Angular2-komponents metoder från en annan komponent?

Jag arbetar på ett NgForm som ska ha en "Återställ alla fält"-knapp. Jag kan komma åt NgForm.reset() för att återställa de flesta fälten. Men jag har ett par instanser av en egen multiselect-komponent som är undantagen från återställningsmetoden.

Den anpassade flervalskontrollen är i princip bara ett <angular2-multiselect> med några <items> kopplade till det, och den har en "X"-knapp som rensar dess värde(n) vilket fungerar bra. Detta sker genom (onDeSelectAll)="onDeSelectAll($event)" på <angular2-multiselect>.

Jag försöker anropa denna metod från en annan knapp inuti samma NgForm. Men jag verkar inte förstå hur man gör det. Jag har också försökt skapa min egen metod

<multiselect name="myMultiselect"/>
   // Lots of options

<button (click)="myMultiselect.onDeSelectAll($event)"/>
   // or
<button (click)="ResetMultiSelect($event)"/>

Jag har också försökt att göra min egen kod som gör samma sak. Så här försöker jag göra det i TypeScript:

public myMultiselect : MultiSelect;

function ResetMultiSelect(items: any)
{
   myMultiselect.selectedItems = items;
   // or
   this.myForm.myMultiselect.selectedItems = items;
}

Jag har försökt att sätta myMultiselect.selectedItems till null, undefined och [] (tom array). Av de tre verkar endast [] fungera. Men när jag tittar i inspektorn säger den att this.selectedItems.split är inte en funktion. Så även om jag får det resultat jag vill ha på det här sättet, gör jag det på fel sätt.

Så min fråga är i princip antingen

A: Finns det ett sätt för mig att ställa in selectedItems i min multiselect till något som rensar alla alternativ från en funktion som utlöses av button?

eller B: Finns det ett bra sätt för min knapp att hitta och anropa min multiselectComponent's onDeSelectAll()-metod?

Svar #1

Använd Angular-mallvariabler för att få en referens till din Angular-komponent. Då kan du enkelt anropa den publika metoden du vill på din barndomponent som:

<multiselect #myMultiselect></multiselect>
<button (onClick)="myMultiselect.onDeSelectAll($event)">Click Here</button>

Du kan också använda @ViewChild-dekoratorn i din komponent .ts för att hämta den komponent du vill ha med dess angivna template-variabel.

Relaterade artiklar