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

​​