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

Angular 2/4中的所有样式（主要全局样式表除外）都是封装的，所以当你包括这样的样式表时：

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

component.css中的所有样式都只会应用于component.html（如果您不使用/deep/之类的内容）。所以随意改变当前布局的宽度，它不会影响其他布局！

改变Angular中某个组件的布局宽度

2 个答案: