Angular 2 Output Binding not working

Question

我尝试编写我的第一个Angular 2应用程序。我试图创建一个输出绑定，但它不起作用，我没有找到有用的解决方案。

我从内部组件触发函数setZoom（），现在来自外部组件的zoomChanged（）函数应该是triggert，但没有任何反应。与setSize（）相同。

这里是我的内部组件：

import {Component, EventEmitter, OnInit, Output} from '@angular/core'; 

@Component({ 
    selector: 'vk-editor-layer-manager', 
    templateUrl: './layer-manager.component.html', 
    styleUrls: ['./layer-manager.component.styl'] 
}) 
export class LayerManagerComponent implements OnInit { 
    @Output('zoomChange') zoomChangeEvent: EventEmitter<number>; 
    @Output('sizeChange') sizeChangeEvent: EventEmitter<any>; 


    prefZoom: number = 50; 

    constructor() { 
    this.zoomChangeEvent = new EventEmitter(); 
    this.sizeChangeEvent = new EventEmitter(); 
    } 

    ngOnInit() { 
    } 

    setZoom(newZoom: number){ 
    this.prefZoom = newZoom; 
    this.zoomChangeEvent.emit(newZoom); 
    } 
    setSize(newWidth: number, newHeight: number){ 
    this.sizeChangeEvent.emit({Width: newWidth, Height: newHeight}); 
    } 

} 

内部组件模板

<section> 
    <header> 
    Einstellungen 
    </header> 
    <div> 
    <label for="prefWidth">Breite:</label> 
    <input type="number" id="prefWidth" #EPrefWidth value="1024" /><br /> 
    <label for="prefHeight">Höhe:</label> 
    <input type="number" id="prefHeight" #EPrefHeight value="1024" /><br /> 
    <button (click)="setSize(EPrefWidth?.value, EPrefHeight?.value)">Speichern</button> 
    <hr /> 
    <label for="prefZoom">Zoom</label> 
    <input type="range" min="0" max="300" id="prefZoom" #EPrefZoom (change)="setZoom(EPrefZoom.value)" [value]="prefZoom" /> 
    <span class="link" (click)="setZoom(50)">50%</span> 
    <span class="link" (click)="setZoom(100)">100%</span> 
    <span class="link" (click)="setZoom(150)">150%</span> 
    <span class="link" (click)="setZoom(200)">200%</span> 
    <span class="link" (click)="setZoom(250)">250%</span> 
    <span class="link" (click)="setZoom(300)">300%</span> 
    <br /> 
    </div> 
</section> 
<section> 
    <header> 
    Layer hinzufügen 
    </header> 
    <div> 
    Lorem ipsum 
    </div> 
</section> 

这里是外部组件：

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'vk-editor-rendering-engine', 
    templateUrl: './rendering-engine.component.html', 
    styleUrls: ['./rendering-engine.component.styl'] 
}) 
export class RenderingEngineComponent implements OnInit { 

    canvas = { 
    width: 1024, 
    height: 1024, 
    zoom: 50 
    } 

    constructor() { } 

    ngOnInit() { 
    } 

    zoomChanged(newZoom: number){ 
    this.canvas.zoom = newZoom; 

    console.log(this.canvas); 
    } 

    sizeChanged(newWidth: number, newHeight: number){ 
    this.canvas.width = newWidth; 
    this.canvas.height = newHeight; 

    console.log(this.canvas); 
    } 

} 

和外部组件模板：

<div id="workarea"> 
    <div id="canvasContainer"> 

    </div> 
</div> 
<vk-editor-layer-manager (zoomChange)="zoomChanged($event)" 
         (sizeChange)="sizeChanged($event.Width, $event.Height)" 
></vk-editor-layer-manager> 

Answer 1

通过@AJT_82的评论，我找到了答案。

在app.module.ts文件（主文件）中，我从引导数组中删除了LayerManagerComponent。现在它工作正常。但我不知道，为什么。

Answer 2

​​