javascript - Separera tvåvägsdatabindning i Angular

Jag har en anpassad tabellkomponent som förväntar sig en modell för vissa radvalshandlingar som kan bindas tvåvägs på följande sätt:

<my-table [(selected)]="selectedRows"></my-table>

Valfritt kan jag också helt enkelt skicka ett objekt via envägsdatabindning om jag inte bryr mig om de ändringar som sker i den modellen:

<my-table [selected]="selectedRows"></my-table>

Om jag vill att inte ha ett tvåvägsbundet dataobjekt, och istället vill ha ett dataobjekt som jag skickar ned till tabellkomponenten via envägsdatabindning, och en hanterare/event-emitter så att syntaxen slutar med att inte skilja sig från detta:

<my-table [selected]="selectedRows" (selected)="handleSelectedChanged($event)"></my-table>

Är det möjligt utan, eller med minimala ändringar av my-table-komponenten? Eller måste jag skapa en @Output-parameter på my-table-komponenten som jag skickar handleSelectedChanged($event) till?

Tack!

Svar #1

Nej, du behöver inte göra några ändringar inuti my-table komponentens tabell. Endast när du vill att ett anpassat event ska emitteras, använd (selectedChange) istället för (selected), det är allt. Jag hoppas att du redan har Input-bindning selected och Output-bindning selectedChange någonstans inuti my-table-komponenten. Dessutom är bindningen av selectedChange-egenskapen helt valfri.

<my-table 
  [selected]="selectedRows" 
  (selectedChange)="handleSelectedChanged($event)">
</my-table>

Om du undrar varför tvåvägsbindning behöver ha Change-suffix på händelsen, beror det på att det är avsiktligt. För att förstå det tydligare kan du också ta en titt på Angulars ngModel-direktiv.

<input [ngModel]="myModel" (ngModelChange)="myModel = $event" />
// You can also do assignment by calling function
<input [ngModel]="myModel" (ngModelChange)="inpuChanged($event)" />

kan skrivas som

<input [(ngModel)]="myModel" />

Svar #2

parent.component.html

<my-table [selected2]="selectedRows" (selected)="handleSelectedChanged($event)"></my-table>

parent.component.ts

handleSelectedChanged(event){
    // console.log(event)
      this.selectedRows = event
    }

my-table.component.ts

@Input() selected2: any;
@Output() selected: EventEmitter<any> = new EventEmitter();

OnCLCICK(){
 this.selected.emit({'key':'value'})
}

eller :--

user.service.ts

@Output() selected: EventEmitter<any> = new EventEmitter();

 setselected(data) {
 this.selected.emit(data);
}

getselected() {
        return this.selected;
      }

my-table.component.ts

@Input() selected2: any;

constructor(
public user: Userservice
){
}

 onclick(){
this.user.setselected({'key','val'})
}

parent.component.html

<my-table [selected2]="selectedRows"></my-table>

parent.component.ts

    constructor(
    public user: Userservice
    ){
    }

ngOnInit(){
this.userService.getselected().subscribe((data) => {
      this.getData(data);
    });
}

getData(data){
console.log(data)
}

Relaterade artiklar