相同的组件不会相互更新。 它们应该始终相同并具有相同的值

Question

我在一个页面上有两个相同的组件。 我正在努力做到这一点，以便当我改变一个时，另一个也应该改变，反之亦然，它们应该总是看起来完全一样。 目前，当我单击其中一个组件上的按钮时，一个会发生变化，一个不会。 我怎样才能让它们一起改变并且总是相似或相同？

page.component.html

<app-clock></app-clock> //same component 
<app-clock></app-clock> //same component

时钟组件.ts

import { Component, Input, OnInit } from '@angular/core';
import { DatePipe } from '@angular/common';
import { SiblingService } from '../sibling.service';

@Component({
  selector: 'app-clock',
  templateUrl: './clock.component.html',
  styleUrls: ['./clock.component.css'],
})
export class ClockComponent implements OnInit {

  public clockIn: any[]= [];
  public clockOut: any[]= [];
  public tCount: any[]= [];
  today = Date.now();
  public enableButton = false
  constructor(public datepipe: DatePipe, private sibService: SiblingService) {

    setInterval(()=> {this.today = Date.now()},1)}

  ngOnInit(){}

  public regClock(){


    let currentDT = this.datepipe.transform((new Date), 'MM/dd/yyyy h:mm');
    let check = true;

    if (this.enableButton == true){
      this.enableButton = !this.enableButton;
      this.clockOut.push(currentDT);
      let lastC_in = this.clockIn[this.clockIn.length-1];
      let lastC_out = this.clockOut[this.clockOut.length-1];
      let start = new Date(lastC_in).getTime();
      let end = new Date(lastC_out).getTime();
      let time = end - start;
      let diffDay = Math.floor(time/86400000);
      let diffHour = Math.floor((time % 86400000)/3600000);
      let diffMin = Math.floor(((time % 86400000)%3600000)/60000);
      let timeCount = diffDay + "day(s) "+ diffHour+"Hour(s) "+diffMin+"Min(s)"
      this.tCount.push(timeCount);
    
    }
    else{
      // console.log("in")
      this.clockIn.push(currentDT);
      this.enableButton = !this.enableButton;
      
    }


  }

}

时钟组件。html

<div class="outer">
    <div class="inner">
     <div class="time" id="f-way"> {{today | date: 'fullDate'}}</div>
     <div class="time" id="t-way"> {{today | date: 'h:mm:ss a'}}</div>
    </div>
    <div [ngSwitch]="enableButton" id="btn-p">
        <button *ngSwitchCase="false" (click)="regClock()" class="btn" >Clock In</button>
        <button *ngSwitchCase="true" (click)="regClock()" class="btn" >Clock Out</button>
    </div>
</div>

Answer 1

组件是相同的，但每次在 DOM 中调用它们时都会*rendered(HTML)/initialized(TS)* ，就像您所做的那样。 因此，它们都运行了单独的实例。

您可以将一个更改反映到另一个更改的唯一方法是创建一个在您的clock.component中使用的全局服务。 在一个组件中进行的每项更改都应该更改全局服务中的值，这将导致它反映在同一组件的另一个实例中（通过订阅它） 。

我建议您查看主题和服务，以及如何使用这些共享数据以实现您想要做的事情。