我的 Ionic/Angular 專案的子組件上有一個切換按鈕。
在我的子組件中:
<ion-buttons slot="end">
<ion-toggle [(ngModel)]="enabled" (ionChange)="toggleEnabled()"></ion-toggle>
</ion-buttons>
在父組件中,我有:
<child-component></child-component>
在父 .ts 中:
enable: boolean = false;
toggleEnabled() {
// code here executed when the child toggle button is changed.
}
如何將離子切換按鈕留在子組件中,但獲取更改并執行父組件上的 toggleEnabled()
uj5u.com熱心網友回復:
您需要將輸出設定到您的子類中。
有關此的檔案:https ://angular.io/guide/inputs-outputs
在角度
.ts
import { Output, EventEmitter } from '@angular/core';
class ChildComponent {
@Output() outputName = new EventEmitter<any>();
public enabled: boolean; // I guess 'enabled' is a boolean into the child's .ts
enableButton(): void {
this.outputName.emit(this.enabled); // here you put the output from child to parent
}
}
.html
<ion-buttons slot="end">
<ion-toggle (click)="enableButton()" [(ngModel)]="enabled"></ion-toggle>
</ion-buttons>
那么您將像這樣將子元素包含到父級的 HTML 檔案中:
<child-component (outputName)="toggleEnabled($event)"></child-component>
父母的.ts
toggleEnabled(isEnabled: boolean): void {
// do something with 'enabled' data
}
轉載請註明出處,本文鏈接:https://www.uj5u.com/shujuku/537417.html
標籤:有角度的离子框架
