특정 구성 요소의 레이아웃 너비를 각도로 변경하십시오.

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/ 같은 것을 사용하지 마십시오). 현재 레이아웃의 너비를 자유롭게 변경하면 다른 레이아웃에는 영향을 미치지 않습니다!