Angular 在两个不同组件中具有相同行为的按钮

我创建了一个按钮，它根据图像的状态、开始/暂停和开始计时来更改图像

我可以在两个不同的组件上运行按钮，但是按钮的图像/状态不会显示，它只是显示时间：(

我怎样才能解决这个问题

我成功地运行了服务组件上的按钮，如图所示

当我转到over组件时，我希望得到与服务组件中的按钮完全相同的状态……但是按钮没有改变状态：（这是我的问题

HTML

<div class="container" style="margin-top: 10%">
    <div class="btn-group" dropdown>

        <button id="button-basic" dropdownToggle type="button" class="btn ">
   <img style="width: 35px;" *ngIf="currentState=='pause'" src="https://img.icons8.com/carbon-copy/100/000000/play-button-circled.png" >
                 <img style="width: 35px;" *ngIf="currentState=='start'" src="https://img.icons8.com/cute-clipart/64/000000/stop-squared.png" >
    </button>
        <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu" role="menu" aria-labelledby="button-basic">
            <li role="menuitem"><a class="dropdown-item" *ngIf="currentState=='pause'" routerLinkActive="active"
                    (click)="currentState='start'; startTimer()">Start</a></li>
            <li role="menuitem"><a class="dropdown-item" *ngIf="currentState=='start'" routerLinkActive="active"
                    (click)="currentState='pause'; pauseTimer()">Stop</a></li>
        </ul>
        <div>
            <span>{{servicesService.fetchDisplay()}}</span>
        </div>
    </div>
</div>

开始
停止

{{servicesService.fetchDisplay（）}

修改您的代码，在服务中维护状态，以便共享

---

修改代码，在服务中维护状态，以便共享