更改某个角度中某个组件的布局宽度

Question

是否有可能只更改所选组件中布局的宽度？我只想在我的登录组件中更改<div class="page home-page">？只在登录组件而不在其他组件上。

Answer 1

指令可以是你的问题的解决方案。

的src /应用/ width.directive.ts

import { Directive, ElementRef, Input } from '@angular/core'; 

@Directive({ selector: '[width]' }) 
export class widthDirective { 

    @Input() 
    set width(width: number) { 
     this.el.nativeElement.style.width = `${this._width}px`; 
    } 

    constructor(el: ElementRef) {} 
} 

然后在任何组件，您可以使用：

<div class="page home-page" width [width]="500"> 

如果你想使你的指令，任何地方访问你可以按照this answer。

Answer 2

在角2/4所有样式（除全球主要的样式表）封装，所以当你包括像这样的样式表：

@Component({ 
    selector: 'component-name', 
    templateUrl: './component.html', 
    styleUrls: ['./component.css'] 
}) 

从component.css所有样式将只适用于component.html（如果你不使用像/deep/和相同的东西）。所以随意更改当前布局的宽度，不会影响其他布局！