如何使用代碼在Angular 2中打開模式？

通常我們在<button>中用data-target="#myModal"打開一個模態。現在我需要使用代碼來控制何時打開模式。如何使用代碼在Angular 2中打開模式？

如果我使用[hidden]或*ngIf來顯示它，我需要刪除class="modal fade"，否則，模式將不會顯示。就像這樣：

<div [hidden]="hideModal" id="myModal">

然而，在這種情況下，刪除class="modal fade"後，該模式不會褪色的，並在背景中沒有陰影。更糟的是，它會顯示在屏幕底部而不是屏幕中心。

有沒有辦法保持class="modal fade"並使用代碼來打開它？

<button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button> 

<div id="myModal" class="modal fade"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-body"> 
     <p>Some text in the modal.</p> 
     </div> 
    </div> 
    </div> 
</div>

來源

2016-02-15 Hongbo Miao

爲什麼要使用'[隱藏]'的模式？ –

@PardeepJain正如我所說，[隱藏]和類=「模態淡化」在一起的模式將永遠不會顯示甚至[隱藏] =「假」。如果你想使用[隱藏]，你需要刪除class =「modal fade」 –

這是我找到的一種方法。您可以添加一個隱藏的按鈕：

<button id="openModalButton" [hidden]="true" data-toggle="modal" data-target="#myModal">Open Modal</button>

然後使用代碼來「點擊」按鈕，打開模式：

document.getElementById("openModalButton").click();

這樣可以保持模式的引導風格和淡入動畫。

來源

2016-02-15 03:49:08

這不適用於編譯時，而不是打字稿。其種類hackish –

鏈接'http：//valor-software.com/ng2-bootstrap /＃/ modals'結果在今天404 ... – gogognome

@gogognome謝謝，我剛剛刪除該鏈接，因爲現在有很多如果用戶選擇使用軟件包，可以使用這些軟件包。 –

這裏是我的全面實施模式引導angular2組件：

我認爲在<body>標籤底部的主index.html文件（與<html>和<body>標籤），你有：

<script src="assets/js/jquery-2.1.1.js"></script> 
    <script src="assets/js/bootstrap.min.js"></script>

modal.component.ts：

import { Component, Input, Output, ElementRef, EventEmitter, AfterViewInit } from '@angular/core'; 

declare var $: any;// this is very importnant (to work this line: this.modalEl.modal('show')) - don't do this (becouse this owerride jQuery which was changed by bootstrap, included in main html-body template): let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js'); 

@Component({ 
    selector: 'modal', 
    templateUrl: './modal.html', 
}) 
export class Modal implements AfterViewInit { 

    @Input() title:string; 
    @Input() showClose:boolean = true; 
    @Output() onClose: EventEmitter<any> = new EventEmitter(); 

    modalEl = null; 
    id: string = uniqueId('modal_'); 

    constructor(private _rootNode: ElementRef) {} 

    open() { 
     this.modalEl.modal('show'); 
    } 

    close() { 
     this.modalEl.modal('hide'); 
    } 

    closeInternal() { // close modal when click on times button in up-right corner 
     this.onClose.next(null); // emit event 
     this.close(); 
    } 

    ngAfterViewInit() { 
     this.modalEl = $(this._rootNode.nativeElement).find('div.modal'); 
    } 

    has(selector) { 
     return $(this._rootNode.nativeElement).find(selector).length; 
    } 
} 

let modal_id: number = 0; 
export function uniqueId(prefix: string): string { 
    return prefix + ++modal_id; 
}

modal.html：

<div class="modal inmodal fade" id="{{modal_id}}" tabindex="-1" role="dialog" aria-hidden="true" #thisModal> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header" [ngClass]="{'hide': !(has('mhead') || title) }"> 
       <button *ngIf="showClose" type="button" class="close" (click)="closeInternal()"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
       <ng-content select="mhead"></ng-content> 
       <h4 *ngIf='title' class="modal-title">{{ title }}</h4> 
      </div> 
      <div class="modal-body"> 
       <ng-content></ng-content> 
      </div> 

      <div class="modal-footer" [ngClass]="{'hide': !has('mfoot') }" > 
       <ng-content select="mfoot"></ng-content> 
      </div> 
     </div> 
    </div> 
</div>

而且例如在客戶端編輯器組件的用法：客戶端 - 編輯component.ts：

import { Component } from '@angular/core'; 
import { ClientService } from './client.service'; 
import { Modal } from '../common'; 

@Component({ 
    selector: 'client-edit', 
    directives: [ Modal ], 
    templateUrl: './client-edit.html', 
    providers: [ ClientService ] 
}) 
export class ClientEdit { 

    _modal = null; 

    constructor(private _ClientService: ClientService) {} 

    bindModal(modal) {this._modal=modal;} 

    open(client) { 
     this._modal.open(); 
     console.log({client}); 
    } 

    close() { 
     this._modal.close(); 
    } 

}

客戶edit.html：

<modal [title]='"Some standard title"' [showClose]='true' (onClose)="close()" #editModal>{{ bindModal(editModal) }} 
    <mhead>Som non-standart title</mhead> 
    Some contents 
    <mfoot><button calss='btn' (click)="close()">Close</button></mfoot> 
</modal>

Ofcourse標題，showClose，mhead和mfoot ar可選參數。

來源

2016-07-08 22:31:04

我找到的最佳方法。將#lgModal或其他變量名稱放在模態中。

您認爲：

<div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-lg"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" (click)="lgModal.hide()" aria-label="Close"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     <h4 class="modal-title">Large modal</h4> 
     </div> 
     <div class="modal-body"> 
     ... 
     </div> 
    </div> 
    </div> 
</div>

在你的組件

import {Component, ViewChild, AfterViewInit} from '@angular/core'; 
import {CORE_DIRECTIVES} from '@angular/common'; 
// todo: change to ng2-bootstrap 
import {MODAL_DIRECTIVES, BS_VIEW_PROVIDERS} from 'ng2-bootstrap/ng2-bootstrap'; 
import {ModalDirective} from 'ng2-bootstrap/ng2-bootstrap'; 


@Component({ 
    selector: 'modal-demo', 
    directives: [MODAL_DIRECTIVES, CORE_DIRECTIVES], 
    viewProviders:[BS_VIEW_PROVIDERS], 
    templateUrl: '/app/components/modals/modalDemo.component.html' 
}) 
export class ModalDemoComponent implements AfterViewInit{ 

    @ViewChild('childModal') public childModal: ModalDirective; 
    @ViewChild('lgModal') public lgModal: ModalDirective; 

    public showChildModal():void { 
    this.childModal.show(); 
    } 

    public hideChildModal():void { 
    this.childModal.hide(); 
    } 

    ngAfterViewInit() { 
     this.lgModal.show(); 
    } 

}

來源

2016-08-15 16:26:40

包括jQuery的作爲通常的index.html裏面的腳本標記。

所有進口後但在宣佈前@Component，添加：

declare var $: any;

現在，你可以自由地在你的角2打字稿代碼的任何地方使用jQuery：

$("#myModal").modal('show');

參考：https://stackoverflow.com/a/38246116/2473022

來源

2017-03-04 14:58:14 Moobie

我這樣做。引導3取決於jQuery。 – yonexbat

-7

嘗試使用此ng-window for angular2

https://github.com/BahgatMashaly/ng-window

來源

2017-03-18 08:37:35

用戶界面讓我哭了。 – Tabares

爲什麼？我不明白你 –

哇，這是可怕的 – Martin8768

簡單的方法在角2或4實現這個（假設使用的是自舉）

Component.html

<button type="button" (click)="openModel()">Open Modal</button> 
 

 
<div #myModel class="modal fade"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
    <div class="modal-header"> 
 
     <h5 class="modal-title ">Title</h5> 
 
     <button type="button" class="close" (click)="closeModel()"> 
 
      <span aria-hidden="true">&times;</span> 
 
     </button> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>Some text in the modal.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Component.ts

import {Component, OnInit, ViewChild} from '@angular/core'; 

@ViewChild('myModal') myModal; 

openModel() { 
    this.myModal.nativeElement.className = 'modal fade show'; 
} 
closeModel() { 
    this.myModal.nativeElement.className = 'modal hide'; 
}

來源

2017-08-22 07:41:28

我用來做什麼的沒有大量的編碼方式是.. 我與id="employeeRegistered"

上的隱藏按鈕我的.ts文件I import ElementRef from '@angular/core'

然後後，我在我的(click)方法處理的一切需要如下：

this.el.nativeElement.querySelector('#employeeRegistered').click();

則如預期模態顯示..

來源

2017-12-04 02:17:32

如何使用代碼在Angular 2中打開模式？

回答

相關問題