Javascript HTML按钮onclick在其他HTML页面上执行操作

这是一个简单的问题，但我不能回避它，因为我是新的角度和网络开发。基本上有两个组件home和dashboard。home.component.html中的按钮将图像源从bulbOn.png更改为bulbOff.png。我希望相同的按钮也可以同样地在dashboard.component.html上更改源代码。我想我需要使用打字脚本，但我不知道怎么做。基本上，一个html上的onClick应该如何在另一个html上执行操作

home.component.html

<mat-card >              
              <button onclick="document.getElementById('myImage').src='assets/BulbOn.svg'">Turn on the bulb.</button>
              
              <img id="myImage" src="assets/BulbOn.svg" style="width:100px">
              
              <button onclick="document.getElementById('myImage').src='assets/BulbOff.svg'">Turn off the bulb.</button>
              
              </mat-card>

<mat-card class="bulbCard">
    <div class="bulbimg"> <img src="assets/BulbOn.svg"> </div>
    </mat-card>

home.component.ts

import { Component, OnInit } from '@angular/core';

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

  constructor() { }

  ngOnInit(): void {
  }

}

import { Component } from '@angular/core';
import { User } from '@app/_models';
import { AccountService } from '@app/_services';

@Component({ templateUrl: 'home.component.html',
styleUrls: ['./home.component.less'] })
export class HomeComponent {
    user: User;

    constructor(private accountService: AccountService) {
        this.user = this.accountService.userValue;
    }
}

---

您应该避免像这样使用Angular操作DOM

您应该使用Angulars事件绑定，而不是使用onclick

为了在多个组件之间共享，我建议使用服务

---

你想要的是在某个地方有一个灯泡状态。在Angular中，通常是父组件将状态传递给其子组件，或者您可以使用服务获取/设置状态。RxJS与Angular捆绑在一起，并具有一些用于共享状态的强大实用程序（可观察）

e、 g.app-state.service.ts

import { BehaviorSubject } from 'rxjs'; 

@Injectable({
  providedIn: 'root'
})
export class AppState {
   public readonly lightBulb = new BehaviorSubject<'on' | 'off'>('on');
}

在HTML中：

<mat-card>              
  <button (click)="state.lightBulb.next('on')">Turn on the bulb.</button>
  <img id="myImage" [src]="(state.lightBulb | async) === 'on' ? 'assets/BulbOn.svg' : 'assets/BulbOff.svg'" style="width:100px">
  <button (click)="state.lightBulb.next('off')">Turn off the bulb.</button>
</mat-card>

和HTML格式：

<mat-card class="bulbCard">
    <div class="bulbimg"><img [src]="(state.lightBulb | async) === 'on' ? 'assets/BulbOn.svg' : 'assets/BulbOff.svg'"></div>
</mat-card>

因此，在本质上，

Subject

s是一些有价值的东西，这些价值可以通过

Subject.next（[value here]）

来改变

Subject

s是

可观察的

s和

可观察的

s可以

subscribe

d来获得这些值。在Angular中，我们有

async

管道，它为您执行此订阅，并在组件销毁后处理该订阅

使用这种“可观察的存储模式”可以做得更好的事情很少，但这里它是最简单的形式

---

与其他事项相关的注意事项：使用

（单击）

而不是

onclick

，因为

（）

是Angular绑定输出的方法。不要直接操作（或至少避免）DOM中的任何内容，例如´document.getElementById（'myImage'）.src='assets/BulbOn.svg'´，而是使用

[]

绑定该属性的值，例如

[bulbSvgSource]

其中“bulbSvgSource”将在组件类中定义。

我尝试按照您使用布尔变量解释的方式进行操作，但对我无效。我对其进行了重构，以向您展示如何使用服务控制状态并在组件之间共享状态。您还需要将bulbStatusService添加到仪表板组件并订阅其更改。我认为这是我正在寻找的解决方案，但我在app-state.service.ts中遇到了一些错误。我生成了该服务，但它说了以下内容，我实在无法理解-（别名）新的BehaviorSubject（_值：未知）：BehaviorSubject导入BehaviorSubject需要1个参数，但得到了0.ts（2554）BehaviorSubject.d.ts（12，17）：未提供“_值”的参数。算术运算的左侧必须是“any”、“number”、“bigint”或枚举类型。ts（2362）运算符“这是因为我在new BehaviorSubject（“on”）中有一个输入错误吗？”；？应该是新的行为主体

import { BehaviorSubject } from 'rxjs'; 

@Injectable({
  providedIn: 'root'
})
export class AppState {
   public readonly lightBulb = new BehaviorSubject<'on' | 'off'>('on');
}

import { Component } from '@angular/core';
import { User } from '@app/_models';
import { AccountService } from '@app/_services';
import { AppState } from 'app-state.service';

@Component({ templateUrl: 'home.component.html',
styleUrls: ['./home.component.less'] })
export class HomeComponent {
    user: User;

    constructor(
        private accountService: AccountService,
        public state: AppState
    ) {
        this.user = this.accountService.userValue;
    }
}

<mat-card>              
  <button (click)="state.lightBulb.next('on')">Turn on the bulb.</button>
  <img id="myImage" [src]="(state.lightBulb | async) === 'on' ? 'assets/BulbOn.svg' : 'assets/BulbOff.svg'" style="width:100px">
  <button (click)="state.lightBulb.next('off')">Turn off the bulb.</button>
</mat-card>

import { Component } from '@angular/core';
import { AppState } from 'app-state.service';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.less']
})
export class DashboardComponent {

  constructor(public state: AppState) { }
}

<mat-card class="bulbCard">
    <div class="bulbimg"><img [src]="(state.lightBulb | async) === 'on' ? 'assets/BulbOn.svg' : 'assets/BulbOff.svg'"></div>
</mat-card>