如何解决如何将数据从一个组件传递到 angular 11 中的另一个不相关组件?
我在 homecomponent.html 中有一个 ngx-slide-carousel,
<div class="row p-4" id="sixtwo">
<ngx-slick-carousel class="carousel"
#slickModal="slick-carousel"
[config]="slideConfig" >
<div ngxSlickItem class="slide" *ngFor="let slide of slides" >
<div class="sixcont">
<img src="{{ slide.img }}" alt="" width="95%">
<button type="button" class="btn btn-info btn-sm " data-toggle="modal" attr.data-target="{{slide.modelname}}">quick preview {{ slide.des}}</button>
</div>
<h1>{{ slide.des}}</h1> <div class="fa fa-star checked"></div>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<div class="fa fa-star checked"></div><br>
<button type="button" class="btn btn-info btn-sm" data-toggle="modal">Add to cart</button>
</div>
</ngx-slick-carousel>
</div>
和它在 homecomponent.ts 中的数组类似,
export class HomepageComponent implements OnInit {
@ViewChild('carousel') carousel: any;
constructor() {
}
slides = [
{img:"",des:"Soft Drinks",modelname:"#myModal",modelnameid:"myModal"},{img: "",des:"BOOKS",modelname:"#myModal2",modelnameid:"myModal2"},des:"Cloths",modelname:"#myModal3",modelnameid:"myModal3"}
// ...and so on...
];
];
slideConfig = {
slidesToShow: 6,slidesToScroll: 1,arrows:true,dots:true,infinite: true,autoplay: true,autoplaySpeed: 8000,speed: 1500}
ngOnInit(): void {
}
}
和 home.compoent.html 的模型代码:
<div *ngFor="let slide of slides" class="modal fade" id="{{slide.modelnameid}}" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<div class="row"><div class="col-md-6">
<h1>About This Product !!!!!!!!</h1>
<img src="{{slide.img}}" >
<br>
</div><div class="col-md-6" >
<h1>About This Product !!!!!!!! {{slide.modelname}}</h1>
//this button click
<button type="button" data-dismiss="modal" routerLink="/aboutproduct" routerLinkActive="active" > Click to know about this product</button>
</div></div></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
我需要在单击按钮时打开一个组件(称为 //this btn click),使用 slide.des,slide.img 作为数据..
我在该模型代码集中尝试了
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。