html ana bilgisayarını değiştiren Angular2 yönergeleri

Question

Angular 2 kullanıyorum ve ana bilgisayar html öğesinin davranışını değiştirmek için bir yönerge istiyorum. Örneğin, ben bir InnerDirective seçici ile istediğiniz '[inner-directive]' şekilde:

@Component({ 
 
selector: '[outer-component]' 
 
template: ` 
 
<div 
 
    inner-directive 
 
></div> 
 
` 
 
}) 
 
class outerComponent{ 
 
someAttribute: boolean; 
 
}

@Component({ 
 
selector: '[outer-component]' 
 
template: ` 
 
<div 
 
    [ngClass] = "{'some-class': someAttribute}" 
 
></div> 
 
` 
 
}) 
 
class outerComponent{ 
 
someAttribute: boolean; 
 
}

aynıdır ben InnerDirective istemiyoruz o ile bir bileşen olmak wn şablonu işi yapıyor (someAttribute aktarılıyor) çünkü bu gereksiz bir html öğesi oluşturacaktır.

Genel olarak, başka bir bileşenin (yukarıda bahsedilen html yedekliliği ile) boş bir bileşen ekleyerek, iç bileşeni bir yönerge haline getirerek elde edilebilecek her şeyi yapmak isterim. Bu şekilde "yapraklarım" hepsi direktif olabilir.

Yardımlarınız için çok teşekkür ederim.

Answer 1

@Directive({ 
    selector: '[innerDirective]', 
    host: {'[class.some-class]': 'innerDirective'} 
}) 
class InnerDirective { 
    @Input() innerDirective: boolean; 
} 

• host: {'[class.some-class]': 'someAttribute'}, innerDirective girişinin değerini, ana makine elemanında some-class olarak bağlar.

• seçici (@Input() innerDirective: boolean;) ile aynı isimde bir giriş (aşağıda gösterilmektedir) terse bağlama sözdizimi

@Component({ 
    selector: '[outer-component]', 
    directives: [InnerDirective], 
    template: ` 
<div [innerDirective]="someAttribute"></div>` 
}) 
class outerComponent{ 
    someAttribute: boolean; 
} 

• [innerDirective]="someAttribute"InnerDirective arasında innerDirective girişine someAttribute değeri bağlar sağlar .

Answer 2

Tipik olarak hangi yönerge yönergesini hedefler. Uygulandığı öğenin görünümünü veya davranışını değiştirmeye izin verir. İşte

bir örnek:

@Directive({ 
    selector: '[inner-directive]' 
}) 
export class InnerDirective { 
    constructor(el: ElementRef) { 
    el.nativeElement.style.backgroundColor = 'yellow'; 
    } 
} 

güncelleme yönergesini tanımlarken host niteliğini artırabilen

@Directive({ 
    (...) 
    host: { 
    '[class.myClass]': 'displayClass', 
    '[attr.someAttr]': 'someAttrValue', 
    '[attr.otherAttr]': 'someValue' 
    } 
}) 
export class InnerDirective { 
    @Input('innner-directive') 
    someValue: string; 

    constructor() { 
    // myClass is added on the host 
    this.displayClass = true; 

    // myClass isn't added on the host 
    // this.displayClass = false; 

    this.someAttrValue = 'some value'; 
    } 

    ngOnInit() { 
    console.log(this.someValue); 
    } 
}