Hello, I am yanyun Changfeng meaning: combined with Li Bai’s famous border fortress poem “Guan Shanyue” take [Yanyun Changfeng] – changfeng tens of thousands of miles, blowing degrees of Jade gate.
Yycf-dialog is a common Angular based business component library that includes Loading, Message, and Confirm. Front-end stack: Angular, TypeScript, RxJS advanced implementation of this Dialog component, two days after its release to the NPM market, the component was downloaded 451 times, as an opportunity for more people to understand and use it. To give you a better idea of what is going on with Angular 8.0, here are a couple of online diagrams:
This is what Loading is doing
This is the confirm effect
This is the message effect
The installation
npm install yycf-dialog
Copy the codeuse
import { DialogModule, DialogService} from 'yycf-dialog/components';
<yycf-dialog [key]="' 1 '"></yycf-dialog>
<yycf-dialog [key]="' 2 '"></yycf-dialog>
<yycf-dialog [key]="' 3 '"></yycf-dialog> // Custom footer button requires custom button style, or directly use other component library button <yycf-dialog [key]="' 4 '" #ct>
<yycf-footer>
<button class="customButtonClass" (click)="ct.accept()"<button> <button class="customButtonclass" (click)="ct.reject()"<button> <yycf-footer> <yycf-dialog>export class DialogDemo implements OnInit{
constructor(private dialog: DialogService) {}
ngOnInit(){
this.dialog.confirm(
{
message:'Are you sure you want to delete? ',
header:'warning',
okVisible:true,
offVisible:true,
okButton:'blue',
offButton:'green',
okLabel:``,
key:"1",
offLabel: ``,
accept:()=>{
this.dialog.confirm({
message:'Deleted',
header:'ok',
okVisible:true,
offVisible:false,
okButton:'blue',
offButton:'red',
okLabel:``,
key:"2",
// delay:3000,
offLabel: ``,
accept:()=>{
this.dialog.confirm({
message:'Is loading like mad... ',
header:'waiting',
okVisible:false,
offVisible:false,
okButton:'blue',
offButton:'green',
okLabel:``,
key:"3", // delay:3000, offLabel: ``, accept:()=>{ }, reject:()=>{ } }) }, reject:()=>{ } }) }, reject:()=>{ } }); }}Copy the codeDocument Parameters
| parameter | instructions | type | The default value |
|---|---|---|---|
| key | Identifies the uniqueness of the current dialog | string | null |
| width | Set the dialog box width | string | auto |
| height | Set dialog box height | string | auto |
| opacity | Set dialog transparency | number | . 5 |
| message | Set the dialog box title | string | yycf-dialog component |
| header | Type of dialog box | ‘waiting’ ‘ok’ ‘warning’ | ‘waiting’ |
| okVisible | Determine the visibility of the button | boolean | true |
| offVisible | Cancel the visibility of the button | boolean | true |
| okButton | Determine the color of the button | ‘blue’ ‘green’ ‘red’ | ‘blue’ |
| offButton | Uncolor the button | ‘blue’ ‘green’ ‘red’ | ‘green’ |
| okLabel | Determine the contents of the button | string | determine |
| offLabel | Cancel the contents of the button | string | cancel |
| delay | Specifies the dialog box life cycle | number (ms) | null |
| accept | Determine the callback function for the button | Function | null |
| reject | Cancel the button’s callback function | Function | null |
PS: If the return value of the callback function is false, the dialog box is not closed after executing the callback function.
DialogService API
| The name of the | parameter | describe |
|---|---|---|
| confirm | object | Create a conversation |
| close | There is no | Close dialog |
let dia = this.dialog.confirm({
message:'Loading like hell',
header:'warning',
okVisible:true,
offVisible:true,
okButton:'blue',
offButton:'green',
okLabel:``,
offLabel: ``,
});
setTimeout(() => dia.close(),3000)
Copy the codeImplementation of the Service class
import {Injectable} from "@angular/core";
import {ReplaySubject} from "rxjs";
import {Dialog} from "./dialog";
@Injectable()
export class DialogService{
zIndex: number = 10000;
private requireDialogSource = new ReplaySubject<Dialog>(1);
requireDialogSource$ = this.requireDialogSource.asObservable();
confirm(dialog: Dialog) {
this.zIndex++;
this.requireDialogSource.next(dialog);
return this;
}
close() { this.requireDialogSource.next(null); }} Exploits the replay feature of RXJS ReplaySubject, which is equivalent to BehaviorSubjectCopy the codeImplementation of component classes
export class DialogComponent implements OnDestroy,OnInit{
@Input() header = 'waiting';
@Input() key:string;
@Input() width = "auto";
@Input() height = "auto";
@Input() opacity = .5;
@Input() message = 'yycf-dialog component';
@Input() okLabel = 'sure';
@Input() offLabel = 'cancel';
@Input() zIndex:number;
@Input() okVisible = true;
@Input() offVisible = true;
@Input() okButton = 'primary';
@Input() offButton = 'secondary';
@Input() visible:boolean;
@Input() delay:number;
dialog:Dialog;
@ContentChild(Footer) footer;
subscription:Subscription;
constructor(
private dialogService:DialogService
) {
}
accept() {
if(this.dialog.acceptEvent) {
this.dialog.acceptEvent.emit();
}else{ this.hide(); this.dialog = null; }}reject() {
if(this.dialog.rejectEvent) {
this.dialog.rejectEvent.emit();
}else{ this.hide(); this.dialog = null; }}hide() {
this.visible = false;
}
ngOnInit() {
this.subscription = this.dialogService.requireDialogSource$.subscribe(dialog=>{
if (dialog == null) {
this.hide();
return;
}
if(dialog.key === this.key){ this.dialog = dialog; this.message = this.dialog.message||this.message; this.okLabel = this.dialog.okLabel||this.okLabel; this.offLabel = this.dialog.offLabel||this.offLabel; this.okVisible = this.dialog.okVisible ==null? this.okVisible:this.dialog.okVisible; this.offVisible = this.dialog.offVisible ==null? this.offVisible:this.dialog.offVisible; this.zIndex = this.dialogService.zIndex ||this.zIndex; this.header = this.dialog.header || this.header; this.opacity = this.dialog.opacity || this.opacity; this.delay = this.dialog.delay||this.delay; this.okButton = this.dialog.okButton||this.okButton; this.offButton = this.dialog.offButton||this.offButton;if(this.dialog.accept) {
this.dialog.acceptEvent = new EventEmitter();
this.dialog.acceptEvent.subscribe(()=>{
let isClose = this.dialog.accept();
if(isClose ! = =false){ this.hide(); this.dialog = null; }})}if(this.dialog.reject) {
this.dialog.rejectEvent = new EventEmitter();
this.dialog.rejectEvent.subscribe(
()=>{
let isClose = this.dialog.reject();
if(isClose ! = =false){ this.hide(); this.dialog = null; }}); }if(this.delay&&this.delay! =0){ timer(this.delay).subscribe(val => this.visible =false);
}
this.visible = true; }}); }ngOnDestroy() {if(this.subscription){
this.subscription.unsubscribe();
}
}
}
@NgModule({
imports:[CommonModule],
declarations:[DialogComponent,Footer],
exports:[DialogComponent,Footer]
})
export class DialogModule{
}
Copy the codeThis is the core code design and implementation, if you need more comprehensive code, please visit: tyht this is the NPM package address, please visit: yycf-dialog
My personal blog
- YanYun changfeng
A series of projects I worked on
- NiceFish: Mermaid is a micro-blog system with a front-end based on Angular7.0 + PrimeNG7.1.0. (The most valuable open source project of GVIP code cloud 3160 ☆)
- Nicefish-react: This is an implementation of the React version, consistent with the NiceFish Angular version. React Hooks version 16.8.3, developed using TypeScript, Ant Design component libraries, and Bootstrap V4.2.1. (7) being
- OpenWMS-Frontend: The OpenWMS project Frontend is based on Angular 7.0 + PrimeNG 7.1.0. (recommended 199 ☆)
- Nicefish-spring-cloud: This is the server-side code for Nicefish, based on SpringCloud. Some basic functions have been completed, such as SpringSecurity+OAuth2+JWT for SSO, paging queries for articles, users, comments, etc. If you need to dock with this back-end code, check out the for-Spring-Cloud branch of this project. (113 ☆)
My social page
- Yan Yun Long wind github
That’s all for today’s sharing. I wish you all the best, happy work and happy every day.
Long wind tens of thousands of miles, blowing yumen Pass.
