首页 > 解决方案 > NativeScript Angular 自定义对话框关闭问题

问题描述

我已经实现了自定义对话框。但是,当我单击关闭对话框时,文本字段会刷新,当我再次点击它时,它会关闭对话框。为什么我需要按两次按钮才能关闭对话框。

//dialog ts file

import { Component } from '@angular/core';
import {ModalDialogParams} from '@nativescript/angular'

@Component({
    selector:'model-content',
    templateUrl:'./input-content-dialog.html',
    styleUrls:['./input-content-dialog.css']
})

export class InputContentDialog{

    public title:string;
    public message:string;
    public hint:string;
    public positiveButtonText:string;
    public negativeButtonText:string;

    constructor(private params:ModalDialogParams){
        this.title = params.context.title;
        this.message = params.context.message;
        this.hint = params.context.hint;
        this.positiveButtonText = params.context.positiveButtonText;
        this.negativeButtonText = params.context.negativeButtonText;

    }

    submit(value:string){
        console.log(value);
        this.params.closeCallback(this.getResultBody(true,value));
    }

    close(value:string){
        console.log(value);
        this.params.closeCallback(this.getResultBody(false,value));
    }

    getResultBody(isSubmitted:boolean,value:string){
        return{
            isSubmitted,
            data:value
        }
    }

}
//html
<StackLayout>
    <Label [text]="title"></Label>
    <Label [text]="message"></Label>
    <TextField #txtField></TextField>
    <Button [text]="positiveButtonText" (tap)="submit(txtField.text)"></Button>
    <Button [text]="negativeButtonText" (tap)="close(txtField.text)"></Button>
</StackLayout>

// file from where i am opening dialog box
import { InputContentDialog } from './../../../shared/components/dialog/input-content-dialog/input-content-dialog';
import { Component, ViewContainerRef } from '@angular/core';
import { ModalDialogService, ModalDialogOptions } from '@nativescript/angular';

@Component({
    selector:'MyList',
    templateUrl:'./my-list.component.html',
    styleUrls:['./my-list.component.css']
})

export class MyListComponent{

    message='You have no lists.';
    buttonText='CREATE A LIST';

    constructor(private modalDialogService:ModalDialogService,private viewContainerRef: ViewContainerRef){

    }

    onPress(){
        console.log('pressed')
        this.modalDialogService.showModal(InputContentDialog,this.getDialogOptions()).then(result=>{
            console.log('isSubmitted:'+result.isSubmitted+" value:"+result.data);
        })
    }


    getDialogOptions(){
        const options:ModalDialogOptions={
            viewContainerRef:this.viewContainerRef,
            context:{
                title:'List Name',
                message:'Choose a name for your list.',
                hint:'My List Name',
                positiveButtonText:'Save',
                negativeButtonText:'Cancel'
            },
            fullscreen:false,
        }
        return options;
    }

}

标签: nativescriptangular2-nativescriptnativescript-angular

解决方案


推荐阅读