Angular 2で@Inputデコレータを使わずにコンポーネント間で変数を渡す

Question

clickイベントが 'a'タグでtrigerredされたときに取得された変数要素を、下のコンポーネント 'clr-modal'に渡します。私はそれを編集することができないので、 'clr-modal'コンポーネントの入力としてそれを取ることはできません。私はいくつかのハックをする必要がありますので、私はそれをHTMLやそれ以外の方法でハックして、ネストされたコンポーネントへの入力として渡します。

マイコード：

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

モード成分に要素を渡す必要はありません。 clr-modalはng-contentを使用しているため、現在のコンポーネントに存在する要素を参照するだけで済みます。あなたは一度だけ、モーダルを定義するために、あなたのビューを更新してから、そのように現在開いているモーダルのデータを保持するために、単一のプロパティを使用する必要があります：あなたはCLR-モーダル `編集できない場合

<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