特定のコンポーネントのレイアウトの幅を角度で変更する

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.cssから

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

すべてのスタイルは、（もしcomponent.htmlのみに適用されますあなたは/deep/と同じものを使用しません）。現在のレイアウトの幅を自由に変更しても、他のレイアウトには影響しません！