0

我在应用程序生命周期的中间（不仅仅是在我创建它时）初始化text.component（选择器）时遇到了一些问题。app-text

这是 app.component.html：

  <div class="container-fluid" *ngFor="let text of texts;let i=index">
    <app-text (textInfoEmitter)="dataFromChild($event)" [elementId]=i  [ngStyle]="{'transform': getRotation(i), 'font-size.px':getFontSize(i)}" ></app-text>
  </div>

我正在从app-textwithtextInfoEmitter函数发出数据并在app.component.tswith中更新模型dataFromChild(e)。

我注意到每次textInfoEmitter发出，app-text都会重新初始化。我可以确认，因为ngOnInit和constructor函数被调用。

这是 app.component.ts 文件：

export class AppComponent implements OnInit {
  texts: [TextModel];

  ngOnInit() {
    this.texts = [
      {
        rotation: 30,
        fontSize: 16,
        offset: { left: 120, top: 200 },
        scale: 1.4
      }
    ]
  }

  dataFromChild(e) {
    this.texts[e.elementID] = {
      rotation: e.rotation,
      fontSize: e.fontSize,
      offset:e.offset,
      scale: 1
    }

  }
  getRotation(i: number) {
    return "rotate(" + this.texts[i].rotation + "deg)";
  }
  getFontSize(i: number) {
    return this.texts[i].fontSize;
  }
}

这text.component.ts很复杂，我还没有找到一种在线复制复杂 Angular 项目的方法。这是我调用的发射辅助函数：

  emitData(e){
    if ($(e).hasClass("h")){
      this.parentId = $(e).attr("id");
    }else{
      this.parentId = $(e).parent().attr("id");
    }

    this.textInfoEmitter.emit(
      {
        elementID: this.parentId,
        rotation: this.delta.circleX,
        fontSize: this.delta.fontSize,
        offset: {
          left: this.drag.x,
          top: this.drag.y
        }
      }
    );
  }

delta并且drag是text.component.ts.

我的问题是，在什么情况下组件会在生命周期内重新初始化？如何防止这种情况？

问题的副本。我本质上也是这样做的，使用 ngFor 指令并使用 EventEmitter 更新模型。这一次，模型更新时不会触发 ngOnInit。

app.component.ts

import { Component } from '@angular/core';
declare var $;
@Component({
  selector: 'app-root',
  template: `
  <div class="container-fluid" *ngFor="let text of texts; let i = index">
<app-text id="i" (dataEmitter)="setData($event)" [ngStyle]="{'transform': getRotation()}"></app-text>
</div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  texts = [
    {rotate:10}
  ];

  ngOnInit(){
  }
  getRotation(){
    return "rotate("+this.texts[0].rotate+"deg)";
  }
  setData(e){
      this.texts[0].rotate = e;
  } 
}

text.component.ts

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
declare var $;
@Component({
  selector: 'app-text',
  template:`<div tabindex="-1" (mousedown)="mousedown($event)" (focusout)="focusout($event)">Text</div>` ,
  styleUrls: ['./text.component.css']
})
export class TextComponent implements OnInit {

@Output() dataEmitter = new EventEmitter();
  constructor() { }

  ngOnInit() {
    console.log("ng on Init");
  }
  mousedown(e){
    $(e.target).focus();
    $(e.target).addClass("selected");
    this.dataEmitter.emit(50);
  }
  focusout(e){
    console.log("f out");
    $(e.target).removeClass("selected");
  }
}
4

2 回答 2

1

您正在更改绑定到哪个this.texts属性的属性，*ngFor而后者又是组件的父级app-text。

这意味着：

  1. 你改变this.texts
  2. *ngFor您为之前的值创建的 DOM 元素this.texts被删除（连同所有app-text子组件）
  3. 新的迭代通过for eachthis.texts的新实例发生app-text
于 2017-09-29T08:55:18.563 回答
0

感谢@dee zg，问题解决了。

当模型改变时，Angular 确实会重新初始化 *ngFor 指令的全部内容。在底层，它会尝试确定是否需要销毁和创建 dom 元素。

如果修改整个模型对象，angular 会创建新的 dom 元素，但如果只修改模型对象的属性，则不会。

例如：

this.texts[0] = {rotation:0, fontSize:23}将导致 ngFor 的内容被销毁并重新创建。

但是如果你使用这个：

this.texts[0].rotation = 0;
this.texts[0].fontSize = 23;

它不会。

于 2017-09-29T09:50:46.200 回答