Ng-önyükleme

Question

ben şöyle bir kalıcı kılmak çalışıyorum oluşturulmuyorsa nasıl çalıştığını bilmiyorum çünkü doktor belirsizdir. Tavsiye?

denedim aşağıdadır:

@Component({ 
    selector: 'edit-profile', 
    templateUrl: './editProfile.html' 
}) 
export class EditProfileComponent{ 

    closeResult: string; 

    constructor(private modalService: NgbModal){ } 

    open(content) { 
     this.modalService.open(content).result.then((result) => { 
      this.closeResult = `Closed with: ${result}`; 
     }, (reason) => { 
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`; 
     }); 
    } 

    private getDismissReason(reason: any): string { 
     if (reason === ModalDismissReasons.ESC) { 
      return 'by pressing ESC'; 
     } else if (reason === ModalDismissReasons.BACKDROP_CLICK) { 
      return 'by clicking on a backdrop'; 
     } else { 
      return `with: ${reason}`; 
     } 
    } 

} 

HTML:

<a (click)="open(content)" class="btn btn-success text-uppercase">Edit My Profile</a> 
</div> 

Ben butonuna tıklayın konsolda hatası:

ERROR TypeError: _co.open is not a function 
    at Object.eval [as handleEvent] (ProfileComponent.html:46) 
    at handleEvent (core.es5.js:12047) 
    at callWithDebugContext (core.es5.js:13508) 
    at Object.debugHandleEvent [as handleEvent] (core.es5.js:13096) 
    at dispatchEvent (core.es5.js:8659) 
    at core.es5.js:9270 
    at HTMLAnchorElement.<anonymous> (platform-browser.es5.js:2668) 
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424) 
    at Object.onInvokeTask (core.es5.js:3924) 
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423) 

Ben göz plunker örnekleri ama onları uygularken uygulamamı kırıyor gibi görünüyor. App.module'a bileşen ve bağımlılık ekledim.

Answer 1

Bir Modal doğrudan Açısal içinde Bootstrap kullanabilirsiniz Display çalışıyorsanız. Yani gibi

npm üçüncü tarafı içe konusunda daha fazla bilgi için

"styles": [ 
    "styles.css", 
    "../node_modules/bootstrap/dist/css/bootstrap.min.css" 
    ], 
    "scripts": ["../node_modules/jquery/dist/jquery.js", 
    "../node_modules/bootstrap/dist/js/bootstrap.min.js" 
    ], 

ÖĞESİNE

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

declare var $ :any; 

@Component({ 

İÇİNDE Eğik-cli.json olarak önyükleme --save

yüklemek lib LINK

Çalışma Modal - LINK.

ve çalışma modal LINK için kaynak kodunu kontrol etmek istiyorum.

Answer 2

Çalışma Plunker Linki: Eğer EditProfileComponent ilan edilmez sevdiği app.module.ts ise http://plnkr.co/edit/vTY9gG9QcL25Wm9NTBqS?p=preview

1), görünüyor. İçe aktarma yerine, EditProfileComponent'i beyanlara koyun.

@NgModule({ 
    imports: [BrowserModule,HttpModule, 
RouterModule.forRoot(appRoutes), NgbModule.forRoot()], 
    declarations: [App, EditProfileComponent] 
    bootstrap: [App] 
}) 

2) Kişisel bileşeni iyi görünüyor: Aşağıdaki kodu bakınız

import {Component} from '@angular/core'; 
    import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap'; 

    @Component({ 
     selector: 'edit-profile', 
     templateUrl: './editProfile.html' 
    }) 
    export class EditProfileComponent { 
     closeResult: string; 

     constructor(private modalService: NgbModal) {} 

     open(content) { 
     this.modalService.open(content).result.then((result) => { 
      this.closeResult = `Closed with: ${result}`; 
     }, (reason) => { 
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`; 
     }); 
     } 

     private getDismissReason(reason: any): string { 
     if (reason === ModalDismissReasons.ESC) { 
      return 'by pressing ESC'; 
     } else if (reason === ModalDismissReasons.BACKDROP_CLICK) { 
      return 'by clicking on a backdrop'; 
     } else { 
      return `with: ${reason}`; 
     } 
     } 
    } 

3) HTML düzenleme-profile.html olarak, olurdu ng-şablonu eksik görünüyor Modal göstermek için başvurdu.

Fark ederseniz, 'a' etiketini tıklattığımızda 'içerik' işlevini iletiriz. Bu 'içerik', html'deki şablona yapılan yerel referanstır. Bileşenimizde belirli modal açmak için 'NgbModal' örneğinin 'this.modalService' örneğini kullanıyoruz.

<ng-template #content let-c="close" let-d="dismiss"> 
    <div class="modal-header"> 
    <h4 class="modal-title">Modal title</h4> 
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')"> 
     <span aria-hidden="true">&times;</span> 
    </button> 
    </div> 
    <div class="modal-body"> 
    <p>One fine body&hellip;</p> 
    </div> 
    <div class="modal-footer"> 
    <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button> 
    </div> 
</ng-template> 


<a (click)="open(content)" class="btn btn-success text-uppercase">Edit My Profile</a>