nativescript - 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;
}
}
解决方案
推荐阅读
- java - Long.MAX_VALUE 异常
- angular - 从 Angular 7 中的 IIS 托管的虚拟目录中读取所有 JSON 文件
- macos - 在带有 Autotools 的 macOS 上,如何告诉 libA 在自定义位置而不是编译器默认位置找到其依赖项 libB?
- c++ - Boost Spirit X3:错误:“...”中没有名为“size”的类型
- flutter - 谷歌助手打开 Flutter 应用时运行命令
- node.js - 如何通过用户名和密码保护环回资源管理器?
- python - 拆分存储在数组中的字符串值
- json - jq 在每个 json 对象之前跳过初始无效字符串并打印所选列
- java - 线程安全构建器模式
- c++ - 在 Visual Studio 2019 项目中静态链接 SDL-2 的问题