Angular 8 - 单击按钮仅执行一次功能()

Question

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

逻辑是这样的：当单击"home"(在footer.component内部(时，将函数发送到parent(app.component(，然后这个将其发送到"hamburguer"按钮(在header.component内部(。

我读过它可能与ngOnChanges有关，但我用它尝试了几次，但它不起作用，但也许我用错了(？

在这里代码：

页脚.组件.html

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

footer.component.ts (in export class...(

message: string = "hamburguer";
@Output() messageEvent = new EventEmitter<string>();
sendMessage() {
    this.messageEvent.emit(this.message);
    //console.log(this.message);
}

//

/

app.component.ts (in export class...(

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 (in export class...(

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

Answer 1

发生这种情况是因为您只触发事件一次。您需要删除 ngOninit 函数并改用您自己的函数。看看下面的StackBlitz示例

顺便说一下，您宁愿使用变量而不是使用 URL。URL 是动态的，可能会更改，将变量传递到函数中并据此填充this.message。

Answer 2

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