Ng içeriğe özellik nasıl bağlanır?

Question

ng içeriğiyle alt bileşen özelliğini bağlamak istiyorum. Mümkün mü? <myComponent>123</myComponent> MyComponent.content için Örneğin Eğer değer 123 – değiştirebilirsiniz yani – bağlayıcı Eğer ihtiyaç 123.

@Directive({ 
    selector: 'myComponent' 
}) 
class MyComponent { 
    content;   // should be set to 123 
} 

@Component({ 
    selector: 'app', 
    directives: [MyComponent], 
    template: ` 
    <myComponent>123</myComponent> 
    ` 
}) 
export class App { } 

Answer 1

@Directive({ 
    selector: 'myComponent' 
}) 
class MyComponent { 
    content;   // should be set to 123 

    constructor(private elementRef:ElementRef) { 
    this.content = this.elementRef.nativeElement.innerHTML; 
    } 

    // to ensure bindings have been resolved 
    // see also 
    // https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#aftercontent 
    afterContentChecked() { 
    this.content = this.elementRef.nativeElement.innerHTML; 
    } 
} 

Plunker example

Answer 2

ayarlı ve siz yönergesi istediğiniz edilmelidir Herhangi bir değişiklik yapmadan, lifecycle hook ngAfterContentChecked():

@Directive({selector: 'myComponent'}) 
export class MyComponent { 
    content:string; 
    constructor(private _elRef: ElementRef) {} 
    ngAfterContentChecked() { 
    this.content = this._elRef.nativeElement.textContent; 
     // or maybe innerHTML, depending on what you want 
    console.log('new value:', this.content); 
    } 
} 

@Component({ 
    selector: 'my-app', 
    template: `<myComponent>{{number}}</myComponent> 
    <button (click)="number = number + 1">increment</button> 
    <button (click)="0">do nothing event</button> 
    <br>look at console log for directive binding updates`, 
    directives: [MyComponent] 
}) 
export class AppComponent { 
    number = 123; 
    constructor() { console.clear(); } 
} 

ngAfterContentChecked() her zaman değişimi saptama çalışır denir Plunker

not edin. Bu yüzden sadece gerçekten bağlayıcıya ihtiyacınız varsa bu yaklaşımı kullanın.