Jquery 在Angular 2中不使用@Input decorator在组件之间传递变量

Jquery 在Angular 2中不使用@Input decorator在组件之间传递变量,jquery,html,angular,Jquery,Html,Angular,我希望将在“a”标记中触发单击事件时获得的变量元素传递给下面的组件“clr modal”。我无法将其作为“clr模态”组件中的输入,因为我无法编辑它。我需要一些技巧,这样我就可以用html本身或者任何技巧来完成它,除了把它作为输入传递给嵌套组件之外 我的代码: `<div class="card-block"> <ul *ngFor="let element of inprogArr; trackBy: elementFn" class="list"&

我希望将在“a”标记中触发单击事件时获得的变量元素传递给下面的组件“clr modal”。我无法将其作为“clr模态”组件中的输入,因为我无法编辑它。我需要一些技巧,这样我就可以用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>`

无需将元素传递给模态组件。因为clr模式使用ng内容,所以您可以只引用当前组件中存在的元素。您应该更新视图,只定义一次模式,然后使用单个属性保存当前打开的模式的数据,如下所示:

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

如果您不能编辑clr模式,它将如何处理您传递给它的内容?如果您只是希望clr模式模板能够访问元素,它应该已经能够大量使用*NGFORTHANK中的元素。你解决了我的问题。你能告诉我更多关于modalElement的信息吗?或者一些有助于了解更多信息的资源。@darsh modalElement不是angular框架的一部分。它只是我通过在模板中赋值在组件上创建的一个变量。这相当于在构件上创建属性并在视图中引用它。我可以称之为fooBar,这也会起作用。但是,我需要将其称为元素以外的其他名称,因为具有该名称的变量已经在*ngforother中使用。为什么像modalElement?entry一样使用“?”而不仅仅是modalElement.entry。非常感谢。这个被称为Elvis运算符,如果链上的任何值为null,则它会短路,并仅返回null。对于本例,这是导入,因为在单击第一个列表项之前,不会定义modalElement。