ng2-bootstrap, call Modal definiert in Kind-Komponente von Elternteil compent

Question

Ich verwende ng2-bootstrap für die modalen Sachen.

Ich versuche meine modals und meine anderen Komponenten auseinander zu trennen. So habe ich die folgenden Dateien:

addPlaylist.modal.ts

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


import {MODAL_DIRECTVES, BS_VIEW_PROVIDERS} from 'ng2-bootstrap/ng2-bootstrap'; 

@Component({ 
    selector: 'addplaylist-modal', 
    directives: [MODAL_DIRECTVES, CORE_DIRECTIVES], 
    viewProviders: [BS_VIEW_PROVIDERS], 
    templateUrl: 'app/channel/modals/addPlaylistModal.html' 
}) 

export class AddPlaylistModalComponent { 
    constructor() { 
    console.log(this); 
    } 
} 

addPlaylistModal.html

<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> 

In seiner HTML-Mutter Komponente I-Code-Stück haben so:

<a (click)="lgModal.show()"><span class="bigplus pull-right"></span></a> 
    //some other code 
    <addplaylist-modal></addplaylist-modal> 

Dies ist die übergeordnete Komponente: channel.component.ts

import { AddPlaylistModalComponent } from './shared/addPlaylist.modal'; 

@Component({ 
    selector: 'channel', 
    styleUrls: ['app/channel/channel.css'], 
    directives: [PlatformsComponent, PagesComponent, PlaylistComponent, VideosComponent, AddPlaylistModalComponent], 
    providers: [PlatformService], 
    templateUrl: 'app/channel/channel.html' 
}) 

Was ich tun möchte, ich will es die Eltern componet lassen können, für den Zugriff auf und öffnen Sie die Modal auch wenn ich die (click) = "lgModal.show()" bei der Elternkomponente schreibe.

Klicken Sie jetzt, wenn ich die <a (click)="lgModal.show()"><span class="bigplus pull-right"></span></a>, wird es sagen

So, wie die übergeordnete Komponente wissen zu lassen, „nicht Eigentum zeigt undefinierte lesen“, dass die lgModal definiert ist, und es ist in der untergeordneten Komponente.

Answer 1

Ihre Lösung könnte etwa so aussehen:

ChildComponent

@Component({ 
    ... 
    exportAs: 'child' <== add this line 
}) 
export class AddPlaylistModalComponent { 
    @ViewChild('lgModal') lgModal; <== reference to Modal directive 
    show(){ <== public method 
    this.lgModal.show(); 
    } 
} 

Parent

template: `<a class="btn btn-success" (click)="c.show()">Add</a> 
      <addplaylist-modal #c="child"></addplaylist-modal>` 

Siehe auch die fertige Probe hier https://plnkr.co/edit/2UAB7lpqqAvchTsLwzr6?p=preview