각도 2: 구성 요소의 호스트 요소를 스타일화하는 방법은 무엇입니까?

각도 2: 구성 요소의 호스트 요소를 스타일화하는 방법은 무엇입니까?

Angular 2에 my-comp라는 구성 요소가 있습니다.

<my-comp></my-comp>

Angular 2에서 이 구성 요소의 호스트 요소를 어떻게 스타일합니까?

폴리머에서는 ":host" 선택기를 사용합니다.Angular 2에서 해봤습니다.하지만 효과가 없습니다.

:host {
  display: block;
  width: 100%;
  height: 100%;
}

또한 구성 요소를 선택 도구로 사용해 보았습니다.

my-comp {
  display: block;
  width: 100%;
  height: 100%;
}

두 가지 방법 모두 효과가 없는 것 같습니다.

감사해요.

버그가 있었지만, 그 사이에 수정되었습니다. :host { }지금은 잘 작동합니다.

또한 지원됩니다.

• :host(selector) { ... }위해서selector호스트 요소의 특성, 클래스... 일치

• :host-context(selector) { ... }위해서selector요소, 클래스...를 상위 구성 요소에 일치시키는 방법

• selector /deep/ selector(계속)selector >>> selector요소 경계에서 일치하는 스타일의 경우 SAS와 함께 작동하지 않음)

  • 업데이트: SAS가 더 이상 사용되지 않습니다./deep/.
    Angular(TS 및 Dart) 추가::ng-deepSASS와도 호환되는 대체품입니다.

  • 업데이트 2: ::slotted ::slotted이제 모든 새 브라우저에서 지원되며 'ViewEncapsulation'과 함께 사용할 수 있습니다.섀도 돔
    https://developer.mozilla.org/en-US/docs/Web/CSS/ :: 업데이트됨

참고 항목Angular 2 구성요소에 외부 CSS 스타일 로드

/deep/그리고.>>>에서는 사용되지 않는 Chrome과 동일한 선택기 결합기의 영향을 받지 않습니다.
Angular는 이를 에뮬레이트(재작성)하므로 이를 지원하는 브라우저에 의존하지 않습니다.

이것이 또한 이유입니다./deep/그리고.>>>와 협력하지 않음ViewEncapsulation.Native네이티브 섀도 DOM을 활성화하고 브라우저 지원에 따라 달라집니다.

구성 요소만 스타일을 지정하는 방법을 찾았습니다.작동 방식에 대한 설명서를 찾지 못했지만 다음과 같은 'host' 속성 아래의 구성 요소 지침에 속성 값을 넣을 수 있습니다.

@Component({
    ...
    styles: [`
      :host {
        'style': 'display: table; height: 100%',
        'class': 'myClass'
      }`
})
export class MyComponent
{
    constructor() {}

    // Also you can use @HostBinding decorator
    @HostBinding('style.background-color') public color: string = 'lime';
    @HostBinding('class.highlighted') public highlighted: boolean = true;
}

업데이트: Günter Zöchbauer가 언급한 것처럼 버그가 있었고, 이제 다음과 같이 CSS 파일에서도 호스트 요소를 스타일링할 수 있습니다.

:host{ ... }

이 문제를 확인하십시오.새로운 템플릿 사전 컴파일 로직이 구현되면 버그가 해결될 것으로 생각합니다.현재로서는 당신이 할 수 있는 최선은 당신의 템플릿을 포장하는 것입니다.<div class="root">그리고 이것을 스타일링합니다.div:

@Component({ ... })
@View({
  template: `
    <div class="root">
      <h2>Hello Angular2!</h2>
      <p>here is your template</p>
    </div>
  `,
  styles: [`
    .root {
      background: blue;
    }
  `],
   ...
})
class SomeComponent {}

이 플런커 보기

일부 일반 스타일을 적용하려는 경우 구성요소에서 .class를 호스트 요소에 추가할 수 있습니다.

export class MyComponent{
     @HostBinding('class') classes = 'classA classB';

아이들의 요소들을 스타일리시하게 하고 싶은 모든 사람들을 위하여.:host다음은 사용 방법의 예입니다.::ng-deep

:host::ng-deep <child element>

예:host::ng-deep span { color: red; }

남의 말대로/deep/사용되지 않습니다.

:host > /deep/ :를 사용해 보십시오.

parent.component.less 파일에 다음을 추가합니다.

:host {
    /deep/ app-child-component {
       //your child style
    }
}

앱-하위 구성 요소를 하위 선택기로 바꿉니다.

언급URL : https://stackoverflow.com/questions/32853924/angular-2-how-to-style-host-element-of-the-component