如何解决如何通过单击按钮更改另一个组件中的CSS样式?
我已经开发了一个组件test1,其中包含一个按钮和一个<p>Hello World</p>
。当我单击按钮时,该段落的背景颜色会更改。但是现在我想在单击按钮时更改app.component中的背景颜色。我试图用@Input解决问题,但是不幸的是它还不能正常工作。你能帮我么? My Stackblitz
我的代码:
// test1.component
// HTML
<button type="button" (click)="testHandler()">Change Color</button>
<p [class.toggled]="classtoggled">Hello World</p>
// CSS
.toggled {
background-color: blue !important;
}
// TS
public classtoggled = false;
testHandler() {
this.classtoggled = true;
}
// app.component
// HTML
<div class="wrapper" [class.test1]="classtoggled">
<router-outlet></router-outlet>
</div>
// CSS
.test1 {
background-color: red !important;
}
// TS
@input() public classtoggled = false;
解决方法
有多种方法可以实现。
对于不相关的组件,您可以使用单例服务在组件之间共享样式对象,并使用[ngStyle]
将其绑定。
styling.service.ts
@Injectable({ providedIn: 'root' })
export class StylingService {
sharedStyleSource = new ReplaySubject<any>(1);
public sharedStyle$ = this.sharedStyleSource.asObservable();
constructor() { }
newStyle(value: any) {
this.sharedStyleSource.next(value);
}
}
app.component.ts
import { StylingService } from './styling.service';
@Component({
...
})
export class AppComponent {
constructor(private styling: StylingService) { }
onClick() {
this.styling.newStyle({ 'background-color': 'blue' });
}
}
app.component.html
<button (mouseup)="onClick()">Change child style</button>
<app-test></app-test>
test.component.ts
import { StylingService } from '../styling.service';
@Component({
...
})
export class TestComponent {
constructor(private styling: StylingService) { }
}
test.component.html
<p [ngStyle]="(styling.sharedStyle$ | async)">
test works!
</p>
工作示例:Stackblitz
,您好,您可以使用ngClass并传递参数。 NgClass Angular
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。