Angular 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ไม่ได้กับ SASS) เพื่อให้สไตล์ตรงกับขอบเขตขององค์ประกอบ

  • UPDATE: SASS /deep/เป็นหึ
    เพิ่ม Angular (TS และ Dart) ::ng-deepเพื่อทดแทนซึ่งรองรับ SASS ได้เช่นกัน

  • UPDATE2: ::slotted ::slottedได้รับการสนับสนุนโดยเบราว์เซอร์ใหม่ทั้งหมดและสามารถใช้กับ `ViewEncapsulation.ShadowDom
    https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

ดูเพิ่มเติมโหลดสไตล์ css ภายนอกลงใน Angular 2 Component

/deep/และ>>>จะไม่ได้รับผลกระทบจาก combinators ตัวเลือกเดียวกันกับใน Chrome ซึ่งเลิกใช้แล้ว
Angular emulate (rewrites) พวกมันดังนั้นจึงไม่ขึ้นอยู่กับเบราว์เซอร์ที่รองรับ

นี่คือสาเหตุ/deep/และ>>>ไม่ทำงานด้วยViewEncapsulation.Nativeซึ่งเปิดใช้งาน shadow shadow DOM และขึ้นอยู่กับการสนับสนุนเบราว์เซอร์

ฉันพบวิธีแก้ปัญหาในการจัดองค์ประกอบองค์ประกอบ ฉันไม่พบเอกสารใด ๆ ว่ามันทำงานอย่างไร แต่คุณสามารถใส่ค่าคุณลักษณะลงในคำสั่งส่วนประกอบภายใต้คุณสมบัติ 'โฮสต์' เช่นนี้:

@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ünterZö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
    }
}

แทนที่ส่วนประกอบของแอพโดยตัวเลือกลูกของคุณ