类型错误：无法读取未定义的属性“tigerStart”

• 我是打字稿和角度 js 的新手。
• 我尝试将另一个组件代码包含到我的代码中。
• 这是我的代码中的baby.js代码
• 但我收到错误。类型错误：无法读取未定义的属性“tigerStart”
• 你们能告诉我如何解决它吗？
• 在下面提供我的代码

TypeError: Cannot read property 'tigerStart' of undefined
    at init.open (pen-pencil.ts:1270)
    at init.trigger (kendo.all.min.js:25)
    at init.open (kendo.all.min.js:45)
    at Penguin.openPopup (pen-pencil.ts:1286)
    at penguin.pencilClicked (headset.ts:689)
    at _View_penguin4._handle_click_45_0 (penguin.ngfactory.js:4087)
    at eval (core.umd.js:9698)
    at eval (platform-browser.umd.js:1877)
    at eval (platform-browser.umd.js:1990)
    at ZoneDelegate.invoke (zone.js:203)

将tigerStart方法包含到整个js代码中

@ViewChild(sports) 公共天空：体育；

that.window = $("#PenguinPopup");
that.window.kendoWindow({
  width: "60%",
  title: false,
  visible: false,
  resizable: false,
  actions: [],
  draggable: false,
  modal: true,
  open: function() {
    $("html, body").css("overflow", "hidden");
    that.isVisible = true;
    $('.kPopUpTitle').html(values.title);
    this.sky.tigerStart();

将鱼组件包含到我的 html 中

<div class="clearFloat"></div>
<ul class="kendu-custom-contextmenu" id="context-menuFinancialSearch">
  <li class="kPopUpBtnTriple">View Details</li>
  <li class="kPopUpBtnTriple">Manage Documents</li>
</ul>

<financeLeftSlider (savedSearchData)='getSaveEvent($event)'></financeLeftSlider>

<Fish></Fish>
<Penguin (documentCount)='getDocumentEvent($event)'></Penguin>
<sports></sports>

<div class="searchNameRequiredPopup">
  <div class="pipepobUpBox pipeWindow kPopupConfirmationBox">
    <div class="row pipePopUpGridCollection pipePopUpContent lineHeightInputs">
      <div class="pipeContent">Please enter the search name.</div>
    </div>
    <div class="clearFloat"></div>
    <div class="row pipePopUpFooter textAligncenterImp">
      <!-- <button class="commonBtn" type="button" id ="deleteDocumentYes">Yes</button> -->
      <button class="clearBtn" type="button" id="searchNameRequiredBtn">Ok</button>
    </div>
    <div class="clearFloat"></div>
  </div>
</div>

宝贝.html

<div id="baby"></div>
<div id="baby1"></div>

baby.js

@Component({
  moduleId: module.id,
  selector: 'sports',
  templateUrl: 'sports.html'
})

export class Star {

  tigerStart(): void {
    kendo.ui.sky($("#baby"), true);
  }
  tigerEnd(): void {
    kendo.ui.sky($("#baby"), false);

  }

  tigerStart1(): void {
    kendo.ui.sky($("#baby1"), true);
  }
  tigerEnd1(): void {
    kendo.ui.sky($("#baby1"), false);
  }

}

• 当我打印这个时，我没有看到天空，所以我阅读了中等形式并尝试使用粗箭头和绑定，但我仍然无法实现它。
• 在孩子看来我正在使用运动
• 你能告诉我如何解决它吗？
• 这样对将来会有帮助

https://medium.com/@thejasonfile/es5-functions-vs-es6-fat-arrow-functions-864033baa1a

@ViewChild(sports) public sky: sports;
**- tried with fat arrow**
open: () => {

**- tried with bind**
        this.sky.tigerStart().bind(this);

在这一行中：

this.sky.tigerStart();

你在期待着this.sky被设置为某事，但事实并非如此。那是因为this不是你想的那样；你不在scope你认为你在。添加一个console.dir(this)在此行之前，刷新页面，如果您想查看您的内容，请检查浏览器控制台this是。然后找出其他方法来解析您真正需要的对象。

Mozilla 开发者网络“this”的参考文章

请尝试以下操作：

// *** Assign this to a variable (self)
var self = this;

that.window = $("#PenguinPopup");
that.window.kendoWindow({
  width: "60%",
  title: false,
  visible: false,
  resizable: false,
  actions: [],
  draggable: false,
  modal: true,
  open: function() {
    $("html, body").css("overflow", "hidden");
    that.isVisible = true;
    $('.kPopUpTitle').html(values.title);

// *** use the self variable instead of this
    self.sky.tigerStart();

您在评论中提到的文章是正确的，但是如果您并不真正理解代码中发生的情况，那么如果您尝试执行其建议的操作，只会让您更加困惑。您可能想更多地了解变量作用域在 Javascript 中的工作原理。一开始有点令人困惑，但理解将帮助您更好地掌握 Javascript。我自己仍然有问题，但我在这里展示的方式相当容易理解。请记住，当您声明变量并在同一级别（或在这些函数内部）声明函数时，您可以从这些函数内部访问该变量（除非您在这些函数内部创建具有相同名称的新变量）。