[英]Angular toggle button to add text to p tag
I have a toggle button , which when clicked should add text 'Dark' to the我有一个切换按钮,单击该按钮时应将文本“暗”添加到
tag.标签。 When clicked again should replace with 'Light'.
再次单击时应替换为“Light”。 Initially there shouldn't be anything.Suppose to use `
最初不应该有任何东西。假设使用`
@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);
}}
I'm not completely sure what you want (a better description would be great), but what I understand from your answer you could do something like this:我不完全确定你想要什么(更好的描述会很棒),但我从你的回答中了解到你可以做这样的事情:
@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;
}
}
or:或者:
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';
}
}
In the darkmode-toggler
component you can do what was mentioned above to change the paragraph's text.在
darkmode-toggler
组件中,您可以执行上述操作来更改段落的文本。
And then use @Output
to give it a custom event.然后使用
@Output
给它一个自定义事件。
If I edit your sample it would look like this:如果我编辑您的示例,它将如下所示:
@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
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.