如何在路由器插座创建组件元素时将css类应用于组件元素？
Kug*_*gel 31 angular2-routing angular
我有看起来像这样的DOM:
<app>
<router-outlet></router-outlet>
<project>...</project>
</app>
其中project元件是由路由器插入.
如何向此元素添加类？
dre*_*ore 42
假设您始终希望将类应用于此组件,则可以host在组件元数据中使用:
@Component({
selector:'project',
host: {
class:'classYouWantApplied`
}
})
导致:
<app>
<router-outlet></router-outlet>
<project class="classYouWantApplied">...</project>
</app>
- 如果我想将类应用于所有路由组件怎么办？ (27认同)
- 如果你不这样做怎么办？做`<router-outlet class ="..."> ...``不起作用:/ (5认同)
关键是/ deep / keyword:
:host /deep/ router-outlet + project {
display: block;
border: 10px solid black;
}
无需任何额外配置即可使用.
:host /deep/ router-outlet + * 对于由Angular Router动态创建的任何组件.
编辑2018/3/5:
由于Angular 4.3.0被/deep/弃用,其建议的替代方案是::ng-deep.关于此问题进行了长时间的讨论.
- 看起来 `/deep/` 已被弃用。根据这个 [issue](https://github.com/angular/angular/issues/17867)，`::ng-deep` 可能是现在的替代品。 (2认同)
- `:: ng-deep`现在也已弃用（v8.0.0） (2认同)
使用adjacent sibling selector和*通配符选择紧随在之后的元素router-outlet
styles.css
router-outlet + * {
/* your css */
}
- 您可以使用类似`::ng-deep router-outlet.router-flex + * { display: flex; 弹性：1 1 自动；flex-direction: column }` 并在组件中定义它。并且没有人敢说它已被弃用。 (5认同)
- 据我所知，Angular 使用类似 `[_nghost_c1]` 的属性来限定元素，例如 `router-outlet + *[_nghost_c1]`。这也被添加到我的 css（我正在编译 scss，也许这就是原因），并且它不会应用于以另一种方式限定范围的以下元素。 (2认同)
- 非常聪明！但是，就我而言，它并不完美，因为我在路线之间使用了动画过渡。在过渡期间，```<router-outlet>```有两个组成部分。传入和传出。要解决此问题，只需将“ +”替换为“〜”。那就是`router-outlet〜*```。 (2认同)
您可以使用 a 来执行此操作，这实际上与使用已经提到的属性HostBinding相同，尽管该方法会使用默认列表规则引发 TSLint 错误。host
在要应用类的组件中：
import { Component, HostBinding, Host (optional for typing) } from '@angular/core';
@Component({...})
export class GiveMeAClassComponent {
@HostBinding('class.some-class') someClass: Host = true;
...
}
然后在根styles.scss文件中，您可以添加以下内容：
.some-class {
// Styles in here will now be applied to your GiveMeAClassComponent at a root level
}
您可以使用相邻的兄弟选择器
router-outlet + project { ... }
https://developer.mozilla.org/en/docs/Web/CSS/Adjacent_sibling_selectors
但前提是@drewmoore 的方法不适用。
- 除非您关闭样式封装，否则它将无法工作。 (4认同)
小智 5
<app>
<div class="your css class">
<router-outlet></router-outlet>
</div>
</app>
这对我有用
小智 5
目前，Angular 6 建议我使用 @HostBindings 和 @HostListeners 而不是 host 属性：
export class ProjectComponent {
@HostBinding('class') classes = 'classYouWantApplied';
}
| 归档时间： |
|
| 查看次数： |
17040 次 |
| 最近记录： |