Angular 2：如何從指令調用 function 到組件？

Question

Angular web 應用程序，添加了“全屏” package 並用於 header 工作正常。 但是當我習慣於特定的頁面形式時，它會顯示錯誤。 我們不能使用特定頁面嗎？

錯誤圖片

在此處輸入圖像描述

指示

import {Directive, HostListener} from '@angular/core';

declare var require: any;
const screenFull = require('screenfull');

@Directive({
    selector: '[appToggleFullscreen]'
})

export class ToggleFullscreenDirective {
    @HostListener('click') onClick() {debugger
        if (screenFull.isEnabled) {
            screenFull.toggle();
        }
    }
}

.html

<a href="javascript:void(0)" class="text-dark" (click)="click()">
   <app-feather-icons [icon]="'maximize'"></app-feather-icons>
 </a>

成分

import { ToggleFullscreenDirective } from '../../../shared/directives/fullscreen.directive';

export class ReportComponent implements OnInit {

@ViewChild(ToggleFullscreenDirective) appToggleFullscreen = null;

  constructor() {}

  click() {
    this.appToggleFullscreen.onClick();
  }
}

我收到錯誤“core.js:6150 ERROR TypeError: Cannot read property 'onClick' of undefined”

Answer 1

this.appToggleFullscreen未定義，因為您沒有在 html 中調用它。

click() {
    this.appToggleFullscreen.onClick();
  }

你必須這樣做，

<a href="javascript:void(0)" class="text-dark" (click)="click()" appToggleFullscreen>
  <span>component here</span>
</a>

堆棧閃電戰