Question

这是一个简单的问题，但是由于我是Angular和Web开发的新手，所以我无法解决。基本上有两个组成部分：主页和仪表板。 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>

dashboard.component.html

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

dashboard.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 {
  }

}

home.component.ts

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;
    }
}

Answer 1

您应该避免使用Angular来操纵DOM。

并且应该使用Angulars事件绑定，而不是使用onclick。 https://angular.io/guide/event-binding

<mat-card>              
    <button (click)="changeBulbState(true)">
        Turn on the bulb.
    </button>
              
    <img [src]="bulbState ? 'assets/BulbOn.svg' : 'assets/BulbOff.svg'" style="width:100px">
              
    <button (click)="changeBulbState(false)">
        Turn off the bulb.
    </button>
              
</mat-card>

在组件的打字稿中为bulbState添加一个变量。与卡中的按钮进行交互时，其值将更改。

图像的src会根据bulbState变量是true还是false来改变。

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;

    bulbState: boolean;

    constructor(
        private accountService: AccountService,
        private bulbStatusService: BulbStatusService
    ) {
        this.user = this.accountService.userValue,
        this.bulbStatusService.bulbStatus.subscribe(data => this.bulbState = value)
    }

    changeBulbState(state: boolean) {
        this.bulbStatusService.changeBulbState(state);
    }

}

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

https://medium.com/front-end-weekly/sharing-data-between-angular-components-f76fa680bf76

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class BulbStatusService {

  private bulbState = new BehaviorSubject(false);
  bulbStatus = this.bulbState.asObservable();

  constructor() { }

  changeBulbState(state: boolean) {
    this.bulbState.next(state)
  }
  
}

Answer 2

您想要的是在某处具有灯泡状态。通常在Angular中，要么是父组件将状态传递给它的子代，要么您可以使用服务来获取/设置状态。 RxJS与Angular捆绑在一起，并且具有一些很棒的实用程序（可观察到的）来共享状态。

例如app-state.service.ts

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;
    }
}

在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>

然后对仪表板组件执行相同的操作：

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) { }
}

在HTML中：

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

因此，在坚果壳中，Subject是具有一定价值的东西，可以通过Subject.next([value here])来更改该价值。

Subject是Observable，而Observable是subscribe d，以便随着时间的推移获得这些值。在Angular中，我们有async管道为您执行此预订，并在组件销毁后也进行处理。

使用这种“可观察的存储模式”，您几乎可以做得更好，但这是最简单的形式。

很少有与其他事物相关的注释：使用(click)代替onclick，因为()是Angular绑定输出的方式。不要直接操纵（或至少避免）DOM中的任何内容，例如“ document.getElementById（'myImage'）。src ='assets / BulbOn.svg'”，而是用[]绑定该属性的值，例如[bulbSvgSource]，其中“ bulbSvgSource”将在组件类中定义。

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

2 个答案: