[英]How to apply css class to a component element when it's created by router-outlet?
I have DOM that looks something like this:我的 DOM 看起来像这样:
<app>
<router-outlet></router-outlet>
<project>...</project>
</app>
where project
element is inserted by the router.其中project
元素由路由器插入。
How do I add a class to this element?如何向该元素添加类?
Assuming you always want the class applied to this component, you can use host
in your component metadata:假设您始终希望将类应用于此组件,您可以在组件元数据中使用host
:
@Component({
selector:'project',
host: {
class:'classYouWantApplied'
}
})
Resulting in:导致:
<app>
<router-outlet></router-outlet>
<project class="classYouWantApplied">...</project>
</app>
The key is /deep/ keyword:关键是/deep/关键字:
:host /deep/ router-outlet + project {
display: block;
border: 10px solid black;
}
This works without any extra configurations.这无需任何额外配置即可工作。
:host /deep/ router-outlet + *
for whatever component dynamically created by Angular Router. :host /deep/ router-outlet + *
用于 Angular 路由器动态创建的任何组件。
Since Angular 4.3.0 made /deep/
deprecated, its suggested alternative is ::ng-deep
.由于Angular 4.3.0已弃用/deep/
,因此建议的替代方案是::ng-deep
。 And there were a long discussion about this.对此进行了长时间的讨论。
You can use the adjacent sibling selector您可以使用相邻的兄弟选择器
router-outlet + project { ... }
https://developer.mozilla.org/en/docs/Web/CSS/Adjacent_sibling_selectors https://developer.mozilla.org/en/docs/Web/CSS/Adjacent_sibling_selectors
but only if @drewmoore's approach doesn't apply.但前提是@drewmoore 的方法不适用。
You can do this with a HostBinding
, which is effectively the same as using the host
property that has already been mentioned, although that method throws a TSLint error with default listing rules.您可以使用HostBinding
执行此操作,这实际上与使用已经提到的host
属性相同,尽管该方法使用默认列表规则引发 TSLint 错误。
In your component on which you want to apply a class:在要应用类的组件中:
import { Component, HostBinding, Host (optional for typing) } from '@angular/core';
@Component({...})
export class GiveMeAClassComponent {
@HostBinding('class.some-class') someClass: Host = true;
...
}
And then in your root styles.scss
file, you can add the following:然后在您的根styles.scss
文件中,您可以添加以下内容:
.some-class {
// Styles in here will now be applied to your GiveMeAClassComponent at a root level
}
<app>
<div class="your css class">
<router-outlet></router-outlet>
</div>
</app>
This works for me这对我有用
If you need to add a class conditionally, you can add it programmatically from the component:如果您需要有条件地添加一个类,您可以从组件中以编程方式添加它:
constructor(private renderer: Renderer2, private elemRef: ElementRef) {
if(someCondition){
renderer.addClass(elemRef.nativeElement, 'myClass');
}
}
Currently, Angular 6 recommends me to use @HostBindings and @HostListeners instead of the host property:目前,Angular 6 建议我使用 @HostBindings 和 @HostListeners 而不是 host 属性:
export class ProjectComponent {
@HostBinding('class') classes = 'classYouWantApplied';
}
since router injects the component after the the router-outler element, if we would like to style all injected component with the same set of rules the folowing rule is can be helpful.由于路由器在 router-outler 元素之后注入组件,如果我们想使用相同的规则集设置所有注入组件的样式,则以下规则可能会有所帮助。
the css "+" operator select the first sibling element of a certain type, while asterisk (*) is used as a wild card to select any 1st sibling of router-outlet css "+" 运算符选择特定类型的第一个兄弟元素,而星号 (*) 用作通配符以选择 router-outlet 的任何第一个兄弟元素
router-outlet + * {
// your rules
}
I created a RouterOutletHelperDirective
which can be modified as necessary.我创建了一个可以根据需要进行修改的RouterOutletHelperDirective
。
Your use-case may be different but for me :您的用例可能会有所不同,但对我来说:
ActivatedRoute
data.我需要根据某些条件(例如ActivatedRoute
数据)阻止此默认设置。You use it like this (the class is optional):您可以这样使用它(该类是可选的):
<router-outlet routerOutletHelper
[routerOutletHelperClass]="'blue-border'"></router-outlet>
Then create the directive, add and export it to your app module.然后创建指令,将其添加并导出到您的应用程序模块。
import { Directive, ElementRef, Renderer2, Input } from "@angular/core";
import { RouterOutlet } from "@angular/router";
import { Subscription } from "rxjs";
@Directive({
selector: 'router-outlet[routerOutletHelper]'
})
export class RouterOutletHelperDirective
{
constructor(private routerOutlet: RouterOutlet,
private element: ElementRef<HTMLElement>,
private renderer: Renderer2) { }
subscription = new Subscription();
@Input('routerOutletHelperClass')
customClassName: string | undefined;
ngOnInit()
{
this.subscription.add(this.routerOutlet.activateEvents.subscribe((_evt: any) => {
// find the component element that was just added
const componentElement = this.element.nativeElement.nextSibling;
// add a custom class
if (this.customClassName)
{
this.renderer.addClass(componentElement, this.customClassName);
}
// add my default classes, unless the activated route data
// (specified in module routing file) has { addDefaultClasses: false }
if (this.routerOutlet.activatedRouteData && this.routerOutlet.activatedRouteData.addDefaultClasses !== false)
{
// these are my application's default classes (material / theming)
// (an additional data parameter could be 'darkTheme: boolean')
this.renderer.addClass(componentElement, 'mat-typography');
this.renderer.addClass(componentElement, 'rr-theme-light');
}
}));
}
ngOnDestroy()
{
this.subscription.unsubscribe();
}
}
For me it helped to wrap the router-outlet into another container.对我来说,它有助于将路由器插座包装到另一个容器中。
<div class="classYouWantApplied">
<router-outlet>
</div>
Like this you could apply the class to the surrounding container.像这样,您可以将类应用于周围的容器。
Add host class name which will add a class to the component then use adjacent to target the element.添加主机类名称,它将向组件添加一个类,然后使用相邻来定位元素。
@Component({
selector:'project',
host: {
class:'Project-wrapper'
}
})
now use CSS adjacent with angular现在使用与角度相邻的 CSS
::ng-deep to target it:
::ng-deep .Project-wrapper {}
it's simple, let's say in your app component you have a这很简单,假设在您的应用程序组件中,您有一个<router-outlet ></router-outlet>
inside this router-outlet you have a route component called <app-product-detail></app-product-detail>
在这个路由器插座中,您有一个名为<app-product-detail></app-product-detail>
的路由组件
and you want to change the view of in the app.component.html.并且您想更改 app.component.html 中的视图。
first inside the the component <app-product-detail>
add this snippet:首先在组件<app-product-detail>
添加以下代码段:
@Component({
selector: 'app-product-detail',
host: {
class:'Project-wrapper'
},
templateUrl: './product-detail.component.html',
styleUrls: ['./product-detail.component.css']
})```
class= 'could be any name' class= '可以是任何名字'
inside app.component.css you add this snippet below:在 app.component.css 中添加以下代码段:
::ng-deep .Project-wrapper {
width: 85%;
background-color: aqua;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.