Вы можете использовать свойство exportAs аннотации @Directive. Он экспортирует директиву, которая будет использоваться в родительском представлении. Из родительского представления вы можете привязать его к переменной представления и получить к нему доступ из родительского класса с помощью @ViewChild().

Пример с плункером:

@Directive({
  selector:'[my-custom-directive]',
  exportAs:'customdirective'   //the name of the variable to access the directive
})
class MyCustomDirective{
  logSomething(text){
    console.log('from custom directive:', text);
  }
}

@Component({
    selector: 'my-app',
    directives:[MyCustomDirective],
    template: `
    <h1>My First Angular 2 App</h1>

    <div #cdire=customdirective my-custom-directive>Some content here</div>
    `
})
export class AppComponent{
  @ViewChild('cdire') element;

  ngAfterViewInit(){
    this.element.logSomething('text from AppComponent');
  }
}

Обновить

Как упоминалось в комментариях, есть еще одна альтернатива вышеупомянутому подходу.

Вместо использования exportAs можно напрямую использовать @ViewChild(MyCustomDirective) или @ViewChildren(MyCustomDirective)

Вот код, демонстрирующий разницу между тремя подходами:

@Component({
    selector: 'my-app',
    directives:[MyCustomDirective],
    template: `
    <h1>My First Angular 2 App</h1>

    <div my-custom-directive>First</div>
    <div #cdire=customdirective my-custom-directive>Second</div>
    <div my-custom-directive>Third</div>
    `
})
export class AppComponent{
  @ViewChild('cdire') secondMyCustomDirective; // Second
  @ViewChildren(MyCustomDirective) allMyCustomDirectives; //['First','Second','Third']
  @ViewChild(MyCustomDirective) firstMyCustomDirective; // First

}

Обновить

Еще один плункер с дополнительными пояснениями

Похоже, что после ответа @Abdulrahman директивы больше не могут быть доступны из @ViewChild или @ViewChildren, поскольку они передают только элементы в самом элементе DOM.

Вместо этого вы должны обращаться к директивам с помощью _3 _ / _ 4_.

@Component({
    selector: 'my-app',
    template: `
    <h1>My First Angular 2 App</h1>

    <div my-custom-directive>First</div>
    <div #cdire=customdirective my-custom-directive>Second</div>
    <div my-custom-directive>Third</div>
    `
})
export class AppComponent{
  @ContentChild('cdire') secondMyCustomDirective; // Second
  @ContentChildren(MyCustomDirective) allMyCustomDirectives; //['First','Second','Third']
  @ContentChild(MyCustomDirective) firstMyCustomDirective; // First
}

Также больше нет свойства directives для атрибута @Component.

Единственное оставшееся решение с 2019 года

Как упоминалось в комментариях к другим ответам, эти другие (ранее действующие) методы не будут работать с более поздними версиями Angular.

Однако возрадуйтесь, ведь есть еще более простой способ ввести его: прямо из конструктора!

@Component({
   // ...
})
export class MyComponent implements OnInit {

  // Would be *undefined*
  // @ContentChild(MyDirective, { static: true })
  // private directive: MyDirective;

  constructor(private directive: MyDirective) { }

  ngOnInit(): void {
    assert.notEqual(this.directive, null); // it passes!
  }
}

Кроме того, вы можете добавить несколько аннотаций, чтобы сообщить механизму внедрения зависимостей, где искать контент для внедрения, используя @ Например, я или @Optional ????