Ana makine öğesine "sınıf" nasıl eklenir?

<component></component> bileşenimi sınıf sınıfına eklemekle birlikte, html (component.html) şablonunun içine nasıl ekleneceğini bilmiyorum.Ana makine öğesine "sınıf" nasıl eklenir?

Bulduğum tek çözüm, öğeyi "ElementRef" yerel öğesi aracılığıyla değiştirmek. Bu çözüm çok basit olması gereken bir şey yapmak için biraz karmaşık görünüyor.

Başka bir sorun, CSS'nin bileşen kapsamı dışında bir bileşen kapsüllemesi kırmasıdır.

Daha basit bir çözüm var mı? Şablonun içinde <root [class]="..."> .... </ root> gibi bir şey var.

kaynak

2016-01-06 lascarayf

Muhtemel kopyası [Vücut sınıfını bir sınıf sınıfıyla (açısal2) nasıl değiştirebilirim?] (Http://stackoverflow.com/questions/34636661/how-do-i-change-the-body-class -via-a-typescript-class-angular2) –

Evet, bu çözüm de işe yarıyor ama korkunç da :). Başka bir problem, CSS'nin bileşen kapsamı dışında tanımlanması gerektiğidir! (ElementRef ile olduğu gibi). – lascarayf

140

@Component({ 
    selector: 'body', 
    template: 'app-element', 
    // prefer decorators (see below) 
    // host:  {'[class.someClass]':'someField'} 
}) 
export class App implements OnInit { 
    constructor(private cdRef:ChangeDetectorRef) {} 

    someField: boolean = false; 
    // alternatively also the host parameter in the @Component()` decorator can be used 
    @HostBinding('class.someClass') someField: boolean = false; 

    ngOnInit() { 
    this.someField = true; // set class `someClass` on `<body>` 
    //this.cdRef.detectChanges(); 
    } 
}

Plunker example

Eğer bileşenin dışında CSS eklemek gerekmez Bu şekilde. sınıf someClass konak elemanı üzerinde ayarlanırsa bileşenin iç ve seçiciden

:host(.someClass) { 
    background-color: red; 
}

eserleri gibi CSS sadece uygulanır.

kaynak

2016-01-06 21:40:30

'ngOnInit()' 'ngAfterViewInit()' yerine -method içinde 'someField = true' yapmak zorunda kaldım. Aksi halde işe yaramazdım. – John

[Buraya çatalla yapılmış] (asıl ': host' parçasını çalıştıran https://plnkr.co/edit/UsHyi78eza01N25ulxzA?p=preview). @Component() dekoratöründe ana bilgisayar parametresi hakkında daha fazla bilgiyi nereden alabilirim (sözdizimi benim için açık değildir ve [@Component belgeleri çok fazla açıklamamaktadır)] (https://angular.io/docs/ts/latest /api/core/index/Component-decorator.html)) veya tercih ettiğiniz HostBinding hakkında daha fazla bilgi edinin (sadece [Interface olarak listelenmiştir] (https://angular.io/docs/ts/latest/api/core/index /HostBinding-interface.html) Angular2 sitesindeki?) –

Daha iyi belgeler bilmiyorum, ancak @Input() '' @Output() '' @HostBinding ile yapabileceğiniz şeyleri yapmanın farklı bir yolu.) '' @HostListener() '' @ViewChild (ren)() '' @ContentChild (ren)() ' –

Günter cevabı (soru dinamik class özelliği istiyor) ama bir ya da eklemenin hızlı ve temiz bir şekilde arıyorsanız ben ... Ben sadece şeyiyle eklersiniz

düşünce büyük ,

@Component({ 
    selector: 'my-component', 
    template: 'app-element', 
    host: {'class': 'someClass1'} 
}) 
export class App implements OnInit { 
... 
}

Ve giriş etiketi üzerinde bir sınıf kullanıyorsanız, Açısal sınıfları birleştirilecek: (yani tema şekillendirme amaçlı olmayan) bileşeninin konak elemana daha statik sınıflar şeyi yapabilecek ör.

<my-component class="someClass2"> 
    I have both someClass1 & someClass2 applied to me 
</my-component>

kaynak

2017-01-08 01:42:12 JoshuaDavid

Bunu basitlik için seviyorum. Ancak benim durumumda, ana eleman farklı bir öznitelikle kapsüllenmiş, diyelim ki 'ngcontent_host' ifadesini şablonumdaki öğelerin herhangi birindeki özelliklerden daha fazla, diyelim ki 'ngcontent_template' olarak adlandırın, eğer 'styleUrls' biçiminde bir stil koyarsam bileşenimden, "ngcontent_host" u etkilemeyecekleri için ana makine öğesini etkilemezler, yalnızca şablon öğelerini etkileyebilirler; Sadece ngcontent_template 'i etkileyebilirler. Yanlış mıyım? Bu konuda herhangi bir öneriniz var mı? Ben her zaman 'ViewEncapsulation.None ' –

Oops, belki Günter diyor ki: dönüştürebilirsiniz sanırım: özel': host' seçici. [Daha fazla bilgi için buraya tıklayın] (https://angular.io/docs/ts/latest/guide/component-styles.html#-host) –

Bileşenin ana bilgisayar elemanına sınıf eklemek için çok basit ve çalışan bir çözüm. Bunu uygulamamda kullanıyorum. Paylaşım için teşekkürler! – Devner

Ana makine öğesine "sınıf" nasıl eklenir?

cevap

İlgili konular