Question

我创建了一个按钮，该按钮可以根据图像的状态更改图像，开始/暂停并开始计时。

我可以运行按钮并在两个不同的组件上运行它，但是，按钮的图像/状态没有出现，它只是向我显示时间：（

我该如何解决？

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

当我进入over组件时，我想获得与service组件中按钮完全相同的状态...但是按钮不会改变状态:(这是我的问题

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>

Answer 1

修改了您的代码，维护了服务中的状态，以便可以共享它。

Stackblitz

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

1 个答案: