![](/img/trans.png)
[英]How to setup input bindings for a component when it's created by router-outlet?
[英]How to apply css class to a component element when it's created by router-outlet?
我的 DOM 看起来像这样:
<app>
<router-outlet></router-outlet>
<project>...</project>
</app>
其中project
元素由路由器插入。
如何向该元素添加类?
假设您始终希望将类应用于此组件,您可以在组件元数据中使用host
:
@Component({
selector:'project',
host: {
class:'classYouWantApplied'
}
})
导致:
<app>
<router-outlet></router-outlet>
<project class="classYouWantApplied">...</project>
</app>
关键是/deep/关键字:
:host /deep/ router-outlet + project {
display: block;
border: 10px solid black;
}
这无需任何额外配置即可工作。
:host /deep/ router-outlet + *
用于 Angular 路由器动态创建的任何组件。
由于Angular 4.3.0已弃用/deep/
,因此建议的替代方案是::ng-deep
。 对此进行了长时间的讨论。
您可以使用相邻的兄弟选择器
router-outlet + project { ... }
https://developer.mozilla.org/en/docs/Web/CSS/Adjacent_sibling_selectors
但前提是@drewmoore 的方法不适用。
您可以使用HostBinding
执行此操作,这实际上与使用已经提到的host
属性相同,尽管该方法使用默认列表规则引发 TSLint 错误。
在要应用类的组件中:
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
}
<app>
<div class="your css class">
<router-outlet></router-outlet>
</div>
</app>
这对我有用
如果您需要有条件地添加一个类,您可以从组件中以编程方式添加它:
constructor(private renderer: Renderer2, private elemRef: ElementRef) {
if(someCondition){
renderer.addClass(elemRef.nativeElement, 'myClass');
}
}
目前,Angular 6 建议我使用 @HostBindings 和 @HostListeners 而不是 host 属性:
export class ProjectComponent {
@HostBinding('class') classes = 'classYouWantApplied';
}
由于路由器在 router-outler 元素之后注入组件,如果我们想使用相同的规则集设置所有注入组件的样式,则以下规则可能会有所帮助。
css "+" 运算符选择特定类型的第一个兄弟元素,而星号 (*) 用作通配符以选择 router-outlet 的任何第一个兄弟元素
router-outlet + * {
// your rules
}
我创建了一个可以根据需要进行修改的RouterOutletHelperDirective
。
您的用例可能会有所不同,但对我来说:
ActivatedRoute
数据)阻止此默认设置。您可以这样使用它(该类是可选的):
<router-outlet routerOutletHelper
[routerOutletHelperClass]="'blue-border'"></router-outlet>
然后创建指令,将其添加并导出到您的应用程序模块。
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();
}
}
对我来说,它有助于将路由器插座包装到另一个容器中。
<div class="classYouWantApplied">
<router-outlet>
</div>
像这样,您可以将类应用于周围的容器。
添加主机类名称,它将向组件添加一个类,然后使用相邻来定位元素。
@Component({
selector:'project',
host: {
class:'Project-wrapper'
}
})
现在使用与角度相邻的 CSS
::ng-deep to target it:
::ng-deep .Project-wrapper {}
这很简单,假设在您的应用程序组件中,您有一个<router-outlet ></router-outlet>
在这个路由器插座中,您有一个名为<app-product-detail></app-product-detail>
的路由组件
并且您想更改 app.component.html 中的视图。
首先在组件<app-product-detail>
添加以下代码段:
@Component({
selector: 'app-product-detail',
host: {
class:'Project-wrapper'
},
templateUrl: './product-detail.component.html',
styleUrls: ['./product-detail.component.css']
})```
class= '可以是任何名字'
在 app.component.css 中添加以下代码段:
::ng-deep .Project-wrapper {
width: 85%;
background-color: aqua;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.