Angular2 + material - 서식을로드하는 방법?

내 angular2 앱에서 재료 불확실한 회 전자를 사용하고 있습니다.Angular2 + material - 서식을로드하는 방법?

https://material.angular.io/components/progress-spinner/examples

어떻게 사용자를 눌러 형태로 전송 버튼이 회 전자를 표시해야합니다.

회 전자로 양식을 작성해야합니까? 일부 전환 양식을 만드십시오 -> 회 전자? 또는 다른 뭔가요?

성공적으로 요청한 후에는 다른보기로 경로가 변경됩니다.

2017-09-03 gkucmierz

당신은 양식을로드 할 때까지 양식을 데이터 서비스에 제출하고 경로가 성공할 것 같아요, 당신은 잘해야 라우터 해결 및 라우터 이벤트를 봐야 할 것 같아요 –

이러한 유형의 이벤트를 관리하는 데 가장 시각적으로 만족스럽고 최상의 작업 방법 중 하나는 양식과 동일한 수준의로드 div를 구현하고 상태를 바꿔주는 클릭 작업으로 양식 div에 ngIf을 사용하는 것입니다. 클릭 제출

<div class="parent-div"> 
    <form *ngIf="!isSubmitted"> 
    ... 
    <buttom type="submit" (click)="isSubmitted=true;"> 
    </form> 
    <div class="loading-div" *ngIf="isSubmitted"> 
    <md-spinner></md-spinner><br> 
    Submitting data... 
    </div> 
</div>

을이 일반 HTML 템플릿 구조입니다,하지만 당신의 참고하게 할 것 몇 가지가 있습니다 :에 대한 메소드 호출

당신은 가능성이 원할 것입니다 양식에 제출하면 isSubmitted=true이됩니다.
parent-div 클래스가 입력되는 한 .loading-div { width: 100%, height: 100%, z-index: 100 }을 만들 수 있습니다. 또한 클래스를 회 전자에 추가하고 div의 가운데에 배치 할 수 있습니다.
또한이 방법을 사용하면 양식을 중복 제출할 수 없습니다.
로딩 컨테이너에 *ngIf 만 추가하고 대신 제출 버튼에 [disabled]="isSubmitted"을 추가하는 것이 좋습니다. 이 방법을 사용하면 투명한 배경을 사용하여 데이터를 표시 할 수 있지만 양식이 명확하게 표현되었습니다.

출처

2017-09-03 16:50:06

Angular2 + material - 서식을로드하는 방법?

답변

관련 문제