【解決方法】angularコンポーネントtsとクラスを使用してボタンのオンとオフを切り替える方法は?

プログラミングQA

2023.03.01

[ad_1]

こんにちはチーム

スイッチとオフの切り替えボタンを作成するのに苦労しています。他の機能がバックグラウンドで既に実装されているため、これを実現するには component.ts とクラスのみを実装する必要があります。

私が試したこと：

// @ts-ignore
import { Component} from '@angular/core';


@Component({
  selector: 'app-area',
  template:'<toggle-button changed() "checked=$event"></toggle-button>',
  styles:['toggle-button {margin:0 auto;}']
  
})

export class MainAppComponent {
  // code goes here
  
  checked:boolean;  
  

}

解決策 1

あなたはほとんどそこにいます。私はあなたがたくさんの質問を投稿していることに気付きました.すべて異なる言語セットで. 1 つのセットに集中し、できる限り多くのことを読んでマスターしてから、次のセットに進むことをお勧めします。

私はあなたの質問をグーグルで検索しましたが、あなたの質問に関するサンプルとハウツーがたくさんありました…

トグルボタンのコードは次のようになります-

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

@Component({
  selector: 'app-toggle-button',
  template: `
    <button (click)="toggle()">Toggle {{ state ? 'On' : 'Off' }}</button>
  `
})
export class MainAppComponent {
  state = false;

  toggle() {
    this.state = !this.state;
  }
}