Question

一个按钮仅执行一次功能，视频显示了该问题： https://vimeo.com/342491616

逻辑如下：单击“ home”（在footer.component内部）后，将函数发送给parent（app.component），然后将此函数发送到“ hamburguer”按钮（在header.component内部）。

我读过它可能与ngOnChanges有关，但是我尝试了几次，但没有用，但是也许我使用错了（？）

此处的代码：

footer.component.html

<a (click)="sendMessage()" routerLink="/page"><img src="assets/images/homebutton.png" class="footer_buttons" id="home_button"></a>

footer.component.ts（在导出类中...）

message: string = "hamburguer";

@Output() messageEvent = new EventEmitter<string>();

sendMessage() {
    this.messageEvent.emit(this.message);
    //console.log(this.message);
}

///////////////////////////////////////////////// ////////////

app.component.ts（在导出类中...）

message = "";
  receiveMessage($event){
    this.message = $event;
    //console.log($event);
}

///////////////////////////////////////////////// ////////////

header.component.html

<div class="hamburguer">
  <a (click)="getUrl();">
    <img src="assets/images/{{ message }}.png" id="hamburguer">
  </a>
</div>

header.component.ts（在导出类中...）

@Input() message;

ngOnInit() {
  if(window.location.pathname != "/settings"){
    this.message = 'hamburguer';
  }else{
    this.message = 'cross';
  }
}

Answer 1

之所以发生这种情况是因为您只触发一次事件。您需要删除ngOninit函数，而改用自己的函数。看一下以下StackBlitz example

顺便说一句，您宁愿使用变量而不是URL。URL是动态的，并且可能会发生变化，将变量传递到函数中并根据其填充this.message。

Answer 2

ngOnInit是第一次激活的函数，并且被调用一次。您应该在页脚按钮“主页”按钮中添加另一个“ if”语句，以更改“ message”变量。

Angular 8-单击的按钮仅执行一次function（）

2 个答案: