typescript - Binda anpassad direktiv till Observable i Angular2

Jag verkar inte kunna lista ut hur databindning fungerar med anpassade direktiv i Angular2. Låt oss säga att jag har ett anpassat direktiv FoobarDirective som accepterar en @Input som är en Observable:

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

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

Och en implementerande komponent som denna:

@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']);
  }
}

...men jag får följande fel: Kan inte binda till 'anObservable' eftersom det inte är en känd inbyggd egenskap.

Här är en plunker.

Svar #1

Jag tror att problemet är selektorn i din direktiv:

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

Eftersom du använder fel selektor, tillämpas inte direktivet så Angular2 vet inget om denna input...

Relaterade artiklar