입력 필드와 두 개의 버튼 제출 및 취소가있는 하단 시트가 있습니다.
상위 구성 요소 HTML
<div class="something" (click)="openBottomSheet()"></div>
부모 구성 요소 TS
import { MatBottomSheet } from "@angular/material";
constructor(private bottomsheet: MatBottomSheet) { }
openBottomSheet(): void {
this.bottomsheet.open(BottomsheetComponent);
}
BottomSheet 구성 요소 HTML
<mat-form-field>
<input type="password" matInput placeholder="Password" [formControl]="password">
</mat-form-field>
<button mat-button (click)="closeBottomSheet()">Cancel</button>
<button mat-button (click)="checkPassword()">Confirm Password</button>
BottomSheet 구성 요소 TS
import { MatBottomSheetRef } from "@angular/material";
constructor(private bottomsheet: MatBottomSheetRef<BottomsheetComponent>){}
closeBottomSheet(){
this.bottomsheet.dismiss();
}
checkPassword(){
//Here I need to pass data to parent component
}
입력 필드에 사용자가 데이터를 입력하고 제출을 클릭하면 네트워크 호출이 완료되고 응답 200이 반환되면 하단 시트에서 상위 구성 요소로 부울을 반환해야합니다. \
위의 사항을 어떻게 달성 할 수 있습니까?
@Output ()을 사용하여 구성 요소와 같이 수행 할 수 있습니까? 그렇다면 여기 하단 시트에서 사용하는 방법은 무엇입니까?
하단 시트 참조 및 제공되는 옵저버 블을 사용할 수 있습니다. 자세한 내용은 인라인 주석을 사용했습니다.
하단 시트에 대한 자세한 내용은 https://material.angular.io/components/bottom-sheet/overview에서 확인할 수 있습니다.
// Parent component
import { MatBottomSheet } from "@angular/material";
constructor(private bottomsheet: MatBottomSheet) { }
openBottomSheet(): void {
// Take refernce of bottom sheet
const bottomSheetRef = this.bottomsheet.open(BottomsheetComponent);
// subscribe to observable that emit event when bottom sheet closes
bottomSheetRef.afterDismissed().subscribe((dataFromChild) => {
console.log(dataFromChild);
});
}
// Child component
import { MatBottomSheetRef } from "@angular/material";
constructor(private bottomsheet: MatBottomSheetRef<BottomsheetComponent>){}
closeBottomSheet(){
// pass the data to parent when bottom sheet closes.
this.bottomsheet.dismiss(data);
}
checkPassword(){
//Here I need to pass data to parent component
}이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다