用於將文本添加到 p 標簽的角度切換按鈕

Question

我有一個切換按鈕，單擊該按鈕時應將文本“暗”添加到

標簽。 再次單擊時應替換為“Light”。 最初不應該有任何東西。假設使用`

    @Component({
      selector: 'darkmode-toggler',
     template: `<div>
                <button>Toggle dark mode</button>
                <p></p>
                </div>`,
                styles: []
                })
         export class DarkModeToggler { }
     @Component({
     selector: 'app-root',
      template: `<div>
     <darkmode-toggler (stateChanged)="handleStateChange($event)"> 
     </darkmode-toggler>
       </div>`,
        styles: []
         })
        export class Resource {  
        handleStateChange(event) {
        console.log(event);  
         }}

Answer 1

我不完全確定你想要什么（更好的描述會很棒），但我從你的回答中了解到你可以做這樣的事情：

@Component({
  selector: 'app-component',
  template: `
    <button (click)="toggleDarkMode()">Toggle dark mode</button>
    <p>{{isDarkMode ? 'dark' : 'light'}} mode</p>
  `
})
export class AppComponent {
  public isDarkMode = false;

  public toggleDarkMode(): void {
    this.isDarkMode = !this.isDarkMode;
  }
}

或者：

type Theme = 'dark' | 'light';

@Component({
  selector: 'app-component',
  template: `
    <button (click)="toggleDarkMode()">Toggle dark mode</button>
    <p>{{theme}} mode</p>
  `
})
export class AppComponent {
  public theme: Theme = 'light';

  public toggleDarkMode(): void {
    this.theme = this.theme === 'light' ? 'dark' : 'light';
  }
}

編輯

在darkmode-toggler組件中，您可以執行上述操作來更改段落的文本。

然后使用@Output給它一個自定義事件。

如果我編輯您的示例，它將如下所示：

@Component({
  selector: 'darkmode-toggler',
  template: `
    <div>
      <button>Toggle dark mode</button>
      <p>{{isDarkMode ? 'dark' : 'light'}} mode</p>
    </div>
  `,
  styles: []
})
export class DarkModeToggler {
  @Output() stateChanged = new EventEmitter<boolean>();
  isDarkMode = false;

  public toggleDarkMode(): void {
    this.isDarkMode = !this.isDarkMode;
    this.stateChanged.emit(this.isDarkMode); // you emit a change here
  }
}

@Component({
  selector: 'app-root',
  template: `
    <div>
      <darkmode-toggler (stateChanged)="handleStateChange($event)"> 
      </darkmode-toggler>
    </div>
  `,
  styles: []
})
export class Resource {  
  handleStateChange(event) {
    console.log(event); // since I made a EventEmitter<boolean>() and I'm emitting the isDarkMode variable's value it'll be true or false
  }
}