调用组件函数时，self.context 不是 Angular2 中的函数答案

【问题标题】：self.context is not a function in Angular2 when calling a component function调用组件函数时，self.context 不是 Angular2 中的函数
【发布时间】：2016-12-13 23:53:23
【问题描述】：

我想在实例化 angular2 组件时调用一个函数，但出现以下错误： TypeError: self.context.dummyFunc 不是函数

以下是一个人为的例子，但会告诉你我的问题。假设我们有以下组件：

import { Component } from '@angular/core';

    @Component({
      selector: 'myItem',
      template: `<div>This will work->{{dummyFunc()}}</div>`,
    })
    export class myItemComponent {
      constructor() { }

      dummyFunc() :string {
        return "bold";
      }
    }

还有以下 HTML：

<ul myItem [ngClass]='dummyFunc()'></ul>

会产生如下异常：

TypeError: self.context.dummyFunc 不是函数

如果我将 HTML 更改为：

<ul myItem></ul>

组件运行并能够调用内部的 dummyFunc 函数 <div>

我假设 dummyFunc() 不是在组件 myItem 的上下文中调用，而是在实例化 myItem 的组件的上下文中调用。

我的问题。实例化组件时，在刚刚创建的组件上调用函数的正确方法是什么？

【问题讨论】：

标签： angular components

【解决方案1】：

事实上，当你在ul 元素上使用dummyFunc 时，你就在myItem 组件之外。所以你不能使用它。您只能访问与当前模板关联的组件的属性和方法。

如果你想使用这个模板中使用的组件的方法，你需要先引用它。您可以尝试以下方法：

<ul #comp myItem [ngClass]="comp.dummyFunc()"></ul>

【讨论】：

【解决方案2】：

选择器和属性需要匹配

selector: 'myitem',

<ul myItem

将选择器更改为'myItem' 或将属性更改为<ul myitem

【讨论】：

这是我问题中的另一个错字。我应该使用我的源代码创建这个问题，但是由于有问题的组件相当大，我选择尝试在不使用源代码的情况下创建一个示例。不幸的是，包括所有拼写错误。（编辑问题）
@Günter Zöchbauer 我们可以使用
不应该像
@Danny 抱歉，但我不明白你的问题。自从我发布答案以来，原始问题已更改，因此我的答案在这种情况下不再有意义。