我想在list.component.ts上的用户mouSEOver / mouseleave时显示来自bucket-modal.component.ts的弹出窗口.
如何在list.component.ts和bucket-modal.component.ts之间进行通信？我的代码在这里.
如何在list.component.ts和bucket-modal.component.ts之间进行通信？我的代码在这里.
list.component.ts
@Component({
selector: 'list',templateUrl: 'list.component.html',styleUrls: ['list.component.css'],})
export class ListComponent implements OnInit {
@Input() state: boolean;
@Output() toggle = new EventEmitter();
onHover() {
this.state = true;
this.toggle.emit(this.state);
console.log("state is ----------" + this.state);
}
onHoverOut() {
this.state = false;
this.toggle.emit(this.state);
console.log("state is------ " + this.state);
}
}
list.component.html
<a (mouSEOver)="onHover()" (mouseleave)="onHoverOut()">random Link list</a>
listdetails.component.ts
@Component({
selector: 'app-list-detail',templateUrl: 'app-list.component.html',styleUrls: ['app-list.component.css'],})
export class ListDetailComponent implements OnInit {
}
listdetails.component.html
<list [elementslist]="listdetails" listingtype="3"></list> <list [elementslist]="listdetails" listingtype="3"></list> <list [elementslist]="listdetails" listingtype="3"></list> <bucket-modal [(showMeaddBucket)]="show2ClickedBucket" [state]="PopUpshow" (toggle)="PopUpshow=$event"></bucket-modal>
斗modal.component.ts
@Component({
selector: 'bucket-modal',templateUrl: 'bucket-modal.component.html',styleUrls: ['bucket-modal.component.css'],})
export class BucketModalComponent implements OnInit {
@Input() state: boolean;
@Output() toggle = new EventEmitter();
onHover() {
this.state = true;
this.toggle.emit(this.state);
console.log("state is " + this.state);
}
onHoverOut() {
this.state = false;
this.toggle.emit(this.state);
console.log("state is " + this.state);
}
}
