Breite eines Layouts in einer bestimmten Komponente in einem Winkel ändern

Question

Ist es möglich, dass Sie die Breite Ihres Layouts nur in einer ausgewählten Komponente ändern? Ich wollte die <div class="page home-page"> nur in meiner Login-Komponente ändern? Nur in der Login-Komponente und nicht auf anderen Komponenten.

Answer 1

Richtlinien können die Lösung Ihres Problems sein.

src/app/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) {} 
} 

Dann in jeder Komponente, die Sie verwenden können:

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

Wenn Sie Ihre Richtlinien zugänglich machen wollen, überall können Sie this answer folgen.

Answer 2

Alle Stile (außer dem Haupt globalen Sheet) in Angular 2/4 sind gekapselt, so dass, wenn Sie Stylesheets wie dies zB:

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

Alle Stile von component.css werden NUR auf component.html angewendet werden (wenn Sie verwenden keine Dinge wie /deep/ und das gleiche). Sie können also die Breite des aktuellen Layouts ändern, dies wirkt sich nicht auf andere Layouts aus!