如何通过点击（Angular 5+）制作横幅显示？

Question

我有一个componentA，我有一个下拉菜单，当用户单击链接时，它将显示位于另一个名为ComponentB 的组件中的横幅。组分A<div class="sendFeedback" (click)="showBanner()"><p>Send Feedback</p></div>ComponentB <--目前这基于 Timer，但我希望它可以在点击时工作  public showFeedbackBanner(type) {    if (type) {      this.sendPositive();    }    this.showFeedback = true;  }

Answer 1

基本上，您必须将 a 添加*ngIf="showFeedback"到组件 B 和(click)="showFeedback = !showFeedback"组件 A 按钮。

因此，当您单击按钮时，将切换 showFeedback 变量（布尔值）。

Answer 2

@Component({

  selector: 'component-a',

  styleUrls: ['./app.component.scss'],

  template: `

  <component-b [showFeedback]="showFeedback"></component-b>

  <p (click)="showFeedback=!showFeedback"> Send Feedback </p>

  `,

})

export class ComponentA {

  showFeedback:boolean=false;

}

@Component({

  selector: 'component-a',

  styleUrls: ['./app.component.scss'],

  template: `

    <div *ngIf="showFeedback">Some Baner Component</div>

  `,

})

export class ComponentB {

  @Input('showFeedback') showFeedback;

}

由于事件处理程序位于 中Component A，Input因此应将 Binding 传递Component B给目标元素元素以更改其行为。

[showFeedback]="showFeedback"

@Input('showFeedback') 显示反馈；