Benutzerdefinierte Anweisung an Observable in Angular2 binden

Question

Ich kann nicht herausfinden, wie Datenbindung mit benutzerdefinierten Anweisungen in Angular2 funktioniert. Lassen Sie uns sagen, dass ich eine benutzerdefinierte Richtlinie FoobarDirective haben, die eine @Input akzeptiert, die ein Observable:

@Directive({ 
    selector: 'foobar' 
}) 
export class FoobarDirective implements OnInit { 
    @Input() anObservable: Observable<string[]>; 

    ngOnInit() { 
    this.anObservable.subscribe(values => { 
     console.log(values); 
    }); 
    } 
} 

Und eine implementierende Komponente wie folgt aus:

@Component({ 
    selector: 'my-app', 
    providers: [], 
    template: ` 
    <div> 
     <h2>{{ message }}</h2> 
     <div foobar [anObservable]="toBind"></div> 
    </div> 
    `, 
    directives: [FoobarDirective] 
}) 
export class App implements OnInit { 
    message: string; 
    toBind: Subject<string[]>; 

    ngOnInit() { 
    this.message = 'Angular2 works!'; 

    this.toBind = new Subject<string[]>(); 
    this.toBind.next(['a', 'b', 'c']); 
    } 
} 

... aber ich bekomme die folgende Fehlermeldung: Can't bind to 'anObservable' since it isn't a known native property .

Hier ist ein plunker.

Answer 1

denke ich, dass das Problem der Wahl Ihrer Richtlinie ist:

@Directive({ 
    selector: '[foobar]' // <------ 
}) 
export class FoobarDirective implements OnInit { 
    (...) 
} 

Da Sie den falschen Selektor verwenden, wird die Richtlinie nicht angewendet, so Angular2 nicht über diesen Eingang nicht kennt ...