Passing Variablen zwischen den Komponenten ohne Verwendung @Input Dekorateur in Angular 2

Question

gebe ich möchte das variable Element erhalten wird, wenn das Click-Ereignis in ‚einem‘ Tag an die unten Komponente ‚clr-modal‘ trigerred ist. Ich kann das nicht als Eingabe in der 'clr-modal' Komponente nehmen, weil ich es nicht bearbeiten kann. Ich brauche etwas Hack, so dass ich tun kann, es selbst HTML oder jede Hack, es zu tun außer es als Eingabe in der verschachtelten Komponente übergeben.

Mein Code:

`<div class="card-block"> 
      <ul *ngFor="let element of inprogArr; trackBy: elementFn" class="list"> 
       <li> 
        <a (click)="opened=true; setval(element);">{{element.entry}}</a> 
        <clr-modal [(clrModalOpen)]="opened"> 
        <h3 class="modal-title">{{element.entry}}</h3> 
        <div class="modal-body"> 
        <p>Description :&emsp;{{element.entryDesc}}</p> 
        <br> 
        </div> 
        <div class="modal-footer"> 
        <button (click)="moveInOn(element); opened=false;" type="submit" class="btn btn-sm" >Move to Ongoing</button> 
        <button (click)="moveInCo(element); opened=false;" type="submit" class="btn btn-sm">Move to Completed</button> 
        </div> 
        </clr-modal> 

       </li> 
      </ul> 

     </div>` 

Answer 1

Es besteht keine Notwendigkeit, das Element zu dem modalen Komponente zu übergeben. Da die clr-modal machen Gebrauch von ng-content Sie sind in der Lage, nur die Elemente zu verweisen, die in der aktuellen Komponente vorhanden ist. Sie sollten Ihre Ansicht aktualisieren, um nur die modalen einmal zu definieren und dann eine einzelne Eigenschaft verwenden, um die Daten der aktuell geöffneten modalen wie so zu halten:

<div class="card-block"> 
    <ul *ngFor="let element of inprogArr; trackBy: elementFn" class="list"> 
     <li> 
      <a (click)="opened=true; setval(element); modalElement = element">{{element.entry}}</a> 
     </li> 
    </ul> 
    <clr-modal [(clrModalOpen)]="opened"> 
     <h3 class="modal-title">{{modalElement?.entry}}</h3> 
      <div class="modal-body"> 
       <p>Description :&emsp;{{modalElement?.entryDesc}}</p> 
       <br> 
      </div> 
      <div class="modal-footer"> 
       <button (click)="moveInOn(modalElement); opened=false;" type="submit" class="btn btn-sm">Move to Ongoing</button> 
       <button (click)="moveInCo(modalElement); opened=false;" type="submit" class="btn btn-sm">Move to Completed</button> 
      </div> 
    </clr-modal> 
</div> 

Demo