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>

堆栈闪电战