Question

我有一个包含一些子组件的父组件。

父组件的行为类似于负责维度的UI管理器，它将信息传递给子组件。

问题是其中两个子组件具有动态宽度，而其余子组件具有固定大小。信息通过指令传递给子组件，但是当组件被初始化/创建时，宽度被提取并传递，这会导致调试模式出错，因为第一次获取的宽度与第二轮不同当其他组件被创建时。

我目前无法更改设计，必须使用负责用户界面的父组件。

任何建议都表示赞赏。

代码非常简单：
父组件（视图）：

 <div #comp1Wrapper>
     <child-comp1 [dimentions]="comp1Dimentions"></child-comp1>
 </div>
 <div #comp2Wrapper>
     <child-comp2 [dimentions]="comp2Dimentions"></child-comp2>
 </div>

父组件：

@ViewChild(comp1Dimentions) private m_comp1Wrapper: ElementRef;
@ViewChild(comp2Dimentions) private m_comp2Wrapper: ElementRef;
get comp1Dimentions:any
{
     return {x: m_comp1Wrapper.nativeElement.width, y: something};
}
get comp2Dimentions:any
{
     return {x: m_comp2Wrapper.nativeElement.width, y: something};
}

我也可以编写子代码，但不认为它会增加任何值这是错误：
XCEPTION：'comp-name'类中的错误comp-class-内联模板：36：46由以下原因引起：表达式在检查后发生了变化。先前价值：'682x55'。当前价值：'634x55'。

Answer 1

可能还有其他的东西，但是第一次绑定到getter或方法，每次调用时都会返回一个新实例，就像在下面的代码中一样，在Angular2（4）中通常不起作用

get comp1Dimentions:any
{
     return {x: m_comp1Wrapper.nativeElement.width, y: something};
     // returns a new instance every time it's called
}
get comp2Dimentions:any
{
     return {x: m_comp2Wrapper.nativeElement.width, y: something};
     // returns a new instance every time it's called
}

更好的方法是使用一个字段来分配值并将视图绑定到

comp1Dimension:any = {x: 0, y: something};
comp2Dimentions:any = {x: 0, y: something};

ngAfterViewInit() {
  this.updateDimentions();
}

并使用某个事件来更新包含维值

的对象

@HostBinding('window:resize') // just one option
updateDimentions() {
  this.comp1Dimension.x = m_comp1Wrapper.nativeElement.width;
  this.comp2Dimentions.x = m_comp2Wrapper.nativeElement.width;
}

ngDoCheck() { // another option
  this.updateDimentions();
}

如果您只在当前值实际上与旧值不同时分配新对象，则可以分配新对象实例而不是更新现有对象。

Angular2在常规方法之后在devMode中执行第二次更改检测，以检查模型是否已稳定。 Angular2变化检测不检查对象属性是否相等，它只检查对象标识。您的代码总是返回一个新的对象实例，因此Angular2永远不会断定with实际上没有更改。

获取Angular2中相关组件的宽度

1 个答案: