html - 如何从 Angular 6 中的另一个组件的打字稿中激活和停用组件中的样式?
问题描述
我在我的app.component.ts
this.renderer.listenGlobal('window', 'scroll', (event) => {
const number = window.scrollY;
if ((number > 150 || window.pageYOffset > 150) && this.location.prepareExternalUrl(this.location.path()) == '/') {
// I want to activate here style .nav-item .nav-link:not(.btn) in navbar.component.html
navbar.classList.remove('navbar-transparent');
} else {
// I want to deactivate here style .nav-item .nav-link:not(.btn) in navbar.component.html
navbar.classList.add('navbar-transparent');
}
});
在navbar.component.html
我有
<li class="nav-item" *ngIf="!isDocumentation() && !isMain() && !isCloud() && !isView()">
<a class="nav-link" rel="tooltip" title="Follow us on Twitter" data-placement="bottom"
href="https://example-link.com" target="_blank">
<i class="fa fa-twitter"></i>
<p class="d-lg-none">Twitter</p>
</a>
</li>
我想自动激活和停用样式navbar.component.scss
.nav-item .nav-link:not(.btn){
color: black;
border-color: black;
}
在app.component.ts
这个地方
// I want to activate here style .nav-item .nav-link:not(.btn) in navbar.component.html
navbar.classList.remove('navbar-transparent');
} else {
// I want to deactivate here style .nav-item .nav-link:not(.btn) in navbar.component.html
navbar.classList.add('navbar-transparent');
}
有什么想法我该怎么做?
解决方案
我认为您正在寻找的是 ngClass。
在 html 中:
<inptut [ngClass]="'navbar-transparent', boolean" />
这将做的是在布尔值为真时添加样式,并在布尔值为假时将其删除。如果您使用的是父子结构,您可以使用@Input 或@Output 来设置布尔值。否则,您可以使用共享服务。
来源:https ://angular.io/api/common/NgClass https://angular.io/guide/component-interaction
推荐阅读
- python - 如何使用 Selenium 和 Python 点击启用 GWT 的元素
- javascript - 从数组jquery填充下拉值?
- python - How do you skip duplicate lines in the txt s?
- dataframe - 在 Julia DataFrame 中使用 for 循环根据另一个值创建变量
- git-bash - 如何在 Jupyterlab 上使用 Git Bash
- hibernate - Hibernate:是否可以仅检索匹配条件的子项?
- python - 使用在同一数据框行中找到的列表中的术语选择数据框行
- java - 为什么我在尝试将图像分配给我的 GridView 时收到此 NullPointerException?
- c# - 统一悬停建筑物,然后再放置它们进行游戏
- api - 我可以使用 Musixmatch API 访问专辑的封面吗?