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

前端之家收集整理的这篇文章主要介绍了调用组件函数时,self.context不是Angular2中的函数前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想在实例化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 is not a function

如果我将HTML更改为:

< ul myItem>< / ul>

该组件运行并能够调用其中的dummyFunc函数
< DIV>

我假设在组件myItem的上下文中没有调用dummyFunc(),而是实例化myItem的组件.

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

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

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

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

猜你在找的Angularjs相关文章