Question

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

我从内部组件触发函数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文件（主文件）中，我从bootstrap数组中删除了LayerManagerComponent。现在它工作正常。但我不知道，为什么。

Answer 2

    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() zoomChangeEvent: EventEmitter();
      @Output() sizeChangeEvent: EventEmitter();


      prefZoom: number = 50;

      ngOnInit() {
      }

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

    }

   export class setSizeEventObject {
      public Width: number;
      public Height: number;
      constructor(_width : number , _height : number){
         this.Width = _width;
         this.Height = _height;
      }
   }



 sizeChanged(event : setSizeEventObject){
    this.canvas.width = event.newWidth;
    this.canvas.height = event.newHeight;

    console.log(this.canvas);
  }

Angular 2输出绑定不起作用

2 个答案: