एंगुलर 4

Question

के साथ संगत एक मोडल पॉपअप कैसे बनाएं, मैं एक पॉपअप विंडो बनाने में सक्षम होना चाहता हूं जो रेडियो बटन का चयन होने पर मेरा एक निश्चित कोणीय 4 घटक लोड करेगा।

ऐसा लगता है कि इस question के जवाब में सूचीबद्ध तरीकों कोणीय 2.

के साथ ही संगत मुझे यकीन है कि जहां शुरू करने के लिए नहीं कर रहा हूँ और किसी भी मदद की सराहना करेंगे कर रहे हैं!

Answer 1

चेक Angular Material Dialogue, यहाँ Plunker

import {Component} from '@angular/core'; 
import {MdDialog, MdDialogRef} from '@angular/material'; 


@Component({ 
    selector: 'dialog-result-example', 
    templateUrl: './dialog-result-example.html', 
}) 
export class DialogResultExample { 
    selectedOption: string; 

    constructor(public dialog: MdDialog) {} 

    openDialog() { 
    let dialogRef = this.dialog.open(DialogResultExampleDialog); 
    dialogRef.afterClosed().subscribe(result => { 
     this.selectedOption = result; 
    }); 
    } 
} 


@Component({ 
    selector: 'dialog-result-example-dialog', 
    templateUrl: './dialog-result-example-dialog.html', 
}) 
export class DialogResultExampleDialog { 
    constructor(public dialogRef: MdDialogRef<DialogResultExampleDialog>) {} 
} 

Answer 2

स्वीकार किए जाते हैं जवाब एक मक्खी स्वाट के लिए एक बड़ी निर्भरता जोड़ता है। मॉडल (और मॉडलस) संवाद बड़े पैमाने पर एक सीएसएस वर्ग या दो का परिणाम हैं। इस "नाम बदलें ..." उदाहरण का प्रयास करें:

1) माता-पिता और बच्चे-मोडल लिखें जैसे कि बच्चा बिल्कुल मोडल नहीं था, लेकिन केवल एक इनलाइन फॉर्म * ngIf संलग्न है।

जनक एचटीएमएल <my-modal> बच्चे का उपयोग करता है:

<div> 
    A div for {{name}}. 
    <button type="button" (click)="showModal()">Rename</button> 
    <my-modal *ngIf="showIt" [oldname]="name" (close)="closeModal($event)"></my-modal> 
</div> 

जनक वर्ग। @Component ब्रेवटी के लिए छोड़ा गया सजावटी। (name संपत्ति माता पिता वर्ग के अंतर्गत आता है और यहां तक ​​कि अगर हम इसे बदलने के लिए एक फार्म नहीं था मौजूद होगा।)

export class AppComponent { 
    name = "old name"; 

    showIt = false; 
    showModal() { 
     this.showIt = true; 
    } 
    closeModal(newName: string) { 
     this.showIt = false; 
     if (newName) this.name = newName; 
    } 

} 

बाल टू-बी मॉडल घटक। @Component सजावटी और आयात फिर से छोड़े गए।

export class MyModalComponent { 
    @Input() oldname = ""; 
    @Output() close = new EventEmitter<string>(); 
    newname = ""; 

    ngOnInit() { 
     // copy all inputs to avoid polluting them 
     this.newname = this.oldname; 
    } 

    ok() { 
     this.close.emit(this.newname); 
    } 

    cancel() { 
     this.close.emit(null); 
    } 
} 

इसे हल करने से पहले बाल HTML।

<div> 
    Rename {{oldname}} 
    <input type="text" (change)="newname = $event.target.value;" /> 
    <button type="button" (click)="ok()">OK</button> 
    <button type="button" (click)="cancel()">Cancel</button> 
</div> 

2) यहाँ बच्चे के लिए सीएसएस है, लेकिन यह अपने पूरे एप्लिकेशन में फिर से उपयोग के लिए एक वैश्विक स्टाइलशीट में रखा जा सकता है। यह modal नामक एक एकल वर्ग है और इसका उद्देश्य <div> तत्व के लिए है।

.modal { 
    /* detach from rest of the document */ 
    position: fixed; 

    /* center */ 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 

    /* ensure in front of rest of page -- increase as needed */ 
    z-index: 1001; 

    /* visual illusion of being in front -- alter to taste */ 
    box-shadow: rgba(0,0,0,0.4) 10px 10px 4px; 

    /* visual illusion of being a solid object -- alter to taste */ 
    background-color: lightblue; 
    border: 5px solid darkblue; 

    /* visual preference of don't crowd the contents -- alter to taste */ 
    padding: 10px; 
} 

लेकिन modal CSS वर्ग इसे नीचे पृष्ठ के साथ सहभागिता नहीं रोकेगा। (इसलिए यह तकनीकी रूप से एक मॉडलस संवाद बनाता है।) इसलिए हम माउस गतिविधि को अवशोषित और अनदेखा करने के लिए मोडल के नीचे overlay डालते हैं। overlay भी <div> तत्व के लिए लक्षित है।

.overlay { 
    /* detach from document */ 
    position: fixed; 

    /* ensure in front of rest of page except modal */ 
    z-index: 1000; 

    /* fill screen to catch mice */ 
    top: 0; 
    left: 0; 
    width: 9999px; 
    height: 9999px; 

    /* dim screen 20% -- alter to taste */ 
    opacity: 0.2; 
    background-color: black; 
} 

3) बच्चे HTML में modal और overlay का प्रयोग करें।

<div class="modal"> 
    Rename {{oldname}} 
    <input type="text" (change)="newname = $event.target.value;" /> 
    <button type="button" (click)="ok()">OK</button> 
    <button type="button" (click)="cancel()">Cancel</button> 
</div> 
<div class="overlay"></div> 

और यही वह है। असल में 2 सीएसएस वर्ग और आप किसी भी घटक को एक मॉडल बना सकते हैं। वास्तव में आप ngClass या [class.modal]="showAsModalBoolean" के साथ सीएसएस वर्ग के अस्तित्व को बदलकर रन-टाइम पर एक मॉडल के रूप में या एक मॉडल के रूप में दिखा सकते हैं।

आप इसे बदल सकते हैं ताकि बच्चा शो/छुपा तर्क नियंत्रित कर सके। * NgIf, showIt, और शो() फ़ंक्शन को बच्चे में ले जाएं। माता-पिता में @ViewChild(MyModalComponent) renameModal: MyModalComponent; जोड़ें और फिर माता-पिता अनिवार्य रूप से this.renameModal.show(this.name); पर कॉल कर सकते हैं और प्रारंभिक पुन: तार कर सकते हैं और आवश्यकतानुसार divs को जोड़ सकते हैं।

बच्चे-मोडल ऊपर दिखाए गए माता-पिता के फ़ंक्शन को जानकारी वापस कर सकता है, या बच्चे की show() विधि स्वाद के अनुसार कॉलबैक स्वीकार कर सकती है या वादा वापस कर सकती है।

दो बातें: हो, तो <my-modal> पर एक * ngIf

this.renameModal.show(..); काम नहीं करेगा क्योंकि यह समारोह के साथ शुरू बेनकाब करने के लिए मौजूद नहीं होगा। * ng अगर पूरे घटक को हटाता है, दिखाएं() फ़ंक्शन और सब, तो अगर आपको किसी कारण से इसकी आवश्यकता हो तो [hidden] का उपयोग करें।

मॉडल-ऑन-मोडल्स में जेड-इंडेक्स समस्याएं होंगी क्योंकि वे सभी एक ही जेड-इंडेक्स साझा करते हैं। इसे [style.z-index]="calculatedValue" या इसी तरह से हल किया जा सकता है।