typescript 将数据传递到 angular 6 中的引导模式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51839198/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pass data to bootstrap modal in angular 6
提问by Keerthi Reddy Yeruva
I am trying to add modal in my project so that if i click on the one link the modal should show name of that particular link.
我试图在我的项目中添加模态，这样如果我点击一个链接，模态应该显示该特定链接的名称。
But it giving me an Error
但它给了我一个错误
please check below link
请检查以下链接
采纳答案by Keerthi Reddy Yeruva
回答by Martin Adámek
It is better to use angular version of bootstrap to do this, that plays nice with angular change detection.
最好使用 angular 版本的 bootstrap 来做到这一点，这对角度变化检测非常有用。
e.g. https://ng-bootstrap.github.io/#/components/modal/examples
例如https://ng-bootstrap.github.io/#/components/modal/examples
Then you will have one component representing your modal, and to pass data to it, just declare public property and do this:
然后你将有一个代表你的模态的组件，并将数据传递给它，只需声明公共属性并执行以下操作：
const modalRef = this.modalService.open(YourModalComponent);
(modalRef.componentInstance as YourModalComponent).yourProperty = yourValue;
Btw to fix the error you are talking about, you could use attrproperty binding, like this:
顺便说一句，要修复您正在谈论的错误，您可以使用attr属性绑定，如下所示：
<button type="button" class="btn btn-primary" data-toggle="modal" [attr.data-target]="'#' + products.name">
It will fix the error, but the modal is still not working, looks like you are also missing CSS there.
它将修复错误，但模式仍然无法正常工作，看起来您在那里也缺少 CSS。
回答by SAAD BELEFQIH
in this example, i show how to pass Id to bootstrap modal because not a good idea to identify the model by another field than Id
在这个例子中，我展示了如何将 Id 传递给引导模式，因为通过 Id 以外的其他字段识别模型不是一个好主意
<button class="btn btn-primary"
data-toggle="modal"
[attr.data-target]="'#Model'+category.idCategory">Open Model
</button>
<div class="modal fade in"
id="Model{{category.idCategory}}"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true">......
</div>
