Question

我想在实例化一个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>

我假设在组件myItem的上下文中没有调用dummyFunc（），而是实例化myItem的组件。

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

Answer 1

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

如果要使用此模板中使用的组件的方法，则需要首先引用它。您可以尝试以下方法：

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

Answer 2

选择器和属性需要匹配

selector: 'myitem',

<ul myItem

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

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

2 个答案: