Question

我正在进行角度4应用，我需要确认框。我想在列表中使用此确认框，每行都会显示一个图标，点击确认框，但我也不希望重复确认框的HTML。

我希望确认框的HTML写在一个地方＆amp;我将在任何列表组件上使用该内容。

示例：在一个列表页面上，确认框的HTML只会加载一次＆amp;我将尽可能多地使用该内容。

Answer 1

您可以创建一个组件作为所需的确认框，并在其TypeScript中指定@input()，这样您就可以使用HTML将数据（可能是此确认框所属的行）提供给组件。

这样，您的组件在其中包含变量一次，并且可能以不同的内容显示。关于哪些信息应该是动态的以及确认框应该做什么，你是非常不明确的，所以我在这里留下这个链接，以便进一步阅读有关组件交互的内容（我想这就是你需要的。定义一次，多次使用不同的内容）

Angular：组件互动 - https://angular.io/guide/component-interaction

Answer 2

您可以使用bootsrap模式

https://github.com/dougludlow/ng2-bs3-modal

在你的html中定义一次

<modal #myModal id="myModal">
    <modal-header [show-close]="true">
        <h4 class="modal-title">Confirmation</h4>
    </modal-header>
    <modal-body>
        <div>{{someBinding}}</div>
    </modal-body>
    <modal-footer>
         <input autofocus id="btModalYes" type="button" (click)="confirm()" value="Ok"/>
         <input id="btModalNo" type="button" data-dismiss="modal" (click)="myModal.dismiss()" value="Cancel">
    </modal-footer>
</modal>

然后在您的组件中，您可以使用绑定更改文本并打开模式

@ViewChild('myModal')
myModal: ModalComponent;

this.myModal.open();

你也可以在它自己的组件中使用这段代码！

通过@Input标记，您可以传递信息，并使用事件发射器@Output，您可以通知父组件所采取的操作。

https://angular.io/api/core/EventEmitter

如何在角度4中为确认框创建单独的组件

2 个答案: