参考ViewChild内容Angular2答案

【问题标题】：Reference ViewChild content Angular2参考ViewChild内容Angular2
【发布时间】：2016-08-10 11:22:10
【问题描述】：

我在 Angular 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 中出现以下异常：

异常：TypeError：无法读取未定义的属性“类型”

如何从我的指令中访问Component？

编辑：

不幸的是我在这里粘贴了错误的代码，但仍然是同样的问题。

我需要得到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);
    }
}

编辑：

我用代码创建了一个 Plunker，检查控制台你会看到 undefined

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

编辑：

接受下面的答案后（它适用于 Plunker），但它不适用于我的 Visual Studio。我收到以下错误：

提供的参数与调用目标的任何签名都不匹配

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

【问题讨论】：

嗨，你有没有弄明白这个？我希望能够从自定义组件中访问内容。如果我尝试使用 @Host(Content) private content: Content，我会遇到同样的打字错误

标签： angular typescript ionic2

【解决方案1】：

在ngAfterViewInit钩子里试试

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

更新：

您可以使用 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

【讨论】：

哇！我犯了一个大错误。这不是Component我想要得到的，而是Content。我会更新我的帖子。
请检查这个plunker plnkr.co/edit/JTL0aMcnh748parhbbfj?p=preview这里有什么问题？
这个 plunker 是关于一个组件的。我正在使用指令。我可以从组件访问Content，但不能从指令访问。
你能在 plunker 上重现它吗？
plnkr.co/edit/ayFskPyDRlpYDkMEapDL?p=preview 但我仍在努力，但您已经可以看到代码和我的期望

【解决方案2】：

您可以将页面中的 @ViewChild(Content) 作为指令输入传递到 ion-header。

所以在你的页面中，你有：

@ViewChild(Content) content: Content;

你的标题看起来像：

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

然后在你的指令类中：

@Input('yourDirective') content: Content;

【讨论】：