Ссылка ViewChild content Angular2

Question

Я создаю директиву в Угловая 2 и в этой директиве мне нужно получить доступ к Component. Для этого я использовал ViewChild (этот подход работал в обычном компоненте, но он не работает в контексте директивы

Это моя директива:.

import {Component, ViewChild} from "@angular/core"; 
import {NavController, NavParams} from "ionic-angular"; 
import {IONIC_DIRECTIVES} from "ionic-angular"; 
import {ComponentBase} from "../../component.base"; 

@Component({ 
    selector: "header-content", 
    directives: [IONIC_DIRECTIVES], 
    templateUrl: "build/pages/components/header-content/header.content.html" 
}) 
export class HeaderContentComponent { 
    @ViewChild(Component) protected component; 

    constructor() { 
     console.log(this.component.type); 
    } 
} 

В console.log я получаю следующее исключение:

EXCEPTION: TypeError: Cannot read property 'type' of undefined

Как я могу получить доступ к Component из моей директивы?

EDIT :

К сожалению, я вставил здесь неправильный код, но все тот же вопрос.

Мне нужно получить Content, а не Component как упомянуто.

Так вот код. Content до сих пор не определен:

import {Component, ViewChild} from "@angular/core"; 
import {NavController, NavParams, Content} from "ionic-angular"; 
import {IONIC_DIRECTIVES} from "ionic-angular"; 
import {ComponentBase} from "../../component.base"; 

@Component({ 
    selector: "header-content", 
    directives: [IONIC_DIRECTIVES], 
    templateUrl: "build/pages/components/header-content/header.content.html" 
}) 
export class HeaderContentComponent { 
    @ViewChild(Content) protected content: Content; 

    public toolbarActive: boolean = false; 

    public toggleToolbar() { 
     this.toolbarActive = !this.toolbarActive; 

     if (this.toolbarActive) { 
      // this.content.removeCssClass("no-scroll"); 
      // this.content.addCssClass("scroll"); 
     } else { 
      // this.content.removeCssClass("scroll"); 
      // this.content.addCssClass("no-scroll"); 
     } 

     // this.content.resize(); 
    } 

    protected ngAfterViewInit() { 
     console.log(this.content); 
    } 
} 

EDIT:

Я создал Plunker с кодом, проверьте консоль и вы увидите неопределенного

https://plnkr.co/edit/ayFskPyDRlpYDkMEapDL?p=preview

EDIT:

После принятия ответа ниже (он работает на Plunker), но он не работает в моей Visual Studio. Я получаю следующее сообщение об ошибке:

Supplied parameters do not match any signature of call target

Новый Plunker: https://plnkr.co/edit/ayFskPyDRlpYDkMEapDL?p=preview

Answer 1

Попробуйте его в ngAfterViewInit крюком

ngAfterViewInit() { 
    console.log(this.component.type); 
} 

Update:

Yo и можно использовать Host декоратора, чтобы сделать это:

import {Component, ViewChild, Host} from "@angular/core"; 
import {Content, IONIC_DIRECTIVES} from "ionic-angular"; 

@Component({ 
    selector: "hello-world", 
    directives: [IONIC_DIRECTIVES], 
    templateUrl: 'src/hello-world.html' 
}) 
export class HelloWorld { 
    constructor(@Host(Content) private content: Content) { 
    console.log(this.content); 
    } 
} 

Plunker

Answer 2

Вы можете передать в @ViewChild (Content) со своей страницы в ионно-заголовка в качестве входа директивы.

Так на вашей странице, у вас есть:

@ViewChild(Content) content: Content; 

Ваш заголовок выглядит так:

<ion-header [yourDirective]="content"> 

А потом в классе директивы:

@Input('yourDirective') content: Content;