@acknow-srl/dialog 中文文档教程

Question

Dialog

处理两个常用的对话框窗口：加载模式对话框和消息对话框。 它依赖于 Material Design MatDialogModule。

AckLoadingDialogConfig (Interface)

用于加载模态对话框的配置对象。

• text (string): message text shown on the dialog. Default: ''.
• label (string): HTML aria-label attribute for the dialog. Default: Loading....
• color (string): Material Design color keyword for spinner (primary, accent or warn). Default: primary.
• id (string): optional HTML id attribute for the dialog. Default: ''.
• diameter (number): Material Design spinner diameter in pixels. Default: 64.
• strokeWidth (number): Material Design spinner size in pixels. Default: 5.

AckMessageDialogConfig (Interface)

消息对话框的配置对象。

• text (string): message text shown on the dialog. Default: ''.
• label (string): HTML aria-label attribute for the dialog. Default: Message.
• color (string): Material Design color keyword for dialog button (primary, accent or warn). Default: primary.
• id (string): optional HTML id attribute for the dialog. Default: ''.
• button (string): optional button text. Default: OK.

AckDialog (Service)

它在 root 中提供，因此它对整个应用程序可用。

Methods

• loading(data: string|AckLoadingDialogConfig = ''): MatDialogRef: opens a modal dialog with a spinner (in indeterminate mode) and an optional custom message. Returns a reference to the opened MatDialog object. Loading dialogs are always modals, because it has to prevent all user interactions (i.e.: during adatabase read/write operation).
• message(data: string|AckMessageDialogConfig): MatDialogRef: opens a dialog with a custom message and a button to close it. Returns a reference to the opened MatDialog object. This dialog is never a modal dialog, because the message is only for information purpose.

Example

/**
 * 1. Import the module in your main module (usually app.module.ts).
 */

import { AckDialogModule } from '@acknow-srl/dialog';

/**
 * 2. Add the module to your app imports.
 */

@NgModule({
  declarations: [
    AppComponent
    ...
  ],
  imports: [
    ...
    AckDialogModule,
    ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

/**
 * 3. Implement some dialogs in your components.
 */

import { AckDialog, AckMessageDialogConfig } from '@acknow-srl/dialog';

@Component({
    ...
})
export class MyComponent {

    constructor(private dialog: AckDialog) {
    }

    /**
     * Open a message dialog.
     * Since it has an OK button to close, no need to return a reference for closing.
     */

    openMessage() {
        this.dialog.message('A useful message for your users.');
    }

    /**
     * Open an error message dialog passing a full configuration object.
     */

    openErrorDialog() {

        const error: AckMessageDialogConfig = {
            text: 'Sorry, but an error has occurred!',
            label: 'Error',
            color: 'warn',
            id: 'my-error',
            button: 'Close'
        };

        this.dialog.message(error);
    }

    /**
     * Open a loading modal dialog without any text and close it after 5 seconds.
     * A loading modal dialog has no way to close itself from inside,
     * because it has to prevent all user interactions for some time.
     * So, we need to return a reference for the opened modal dialog to close it.
     */

    openLoading() {

        const loadingDialogRef = this.dialog.loading();

        setTimeout(function() {
            loadingDialogRef.close();
        },5000);

    }
}