2

我最近从 angular 2.3.1 更新到 2.4.7，我发现了一个非常奇怪的行为，这就是代码：

即将到来的Games.html

<div class="row nomargin upcomingGames">
    <tl-responsive-height [margin]="15">
            <tl-upcoming-game *ngFor="let game of gamesSubscription |async"
                              [game]="game"
                              color="#8777b4"></tl-upcoming-game>
    </tl-responsive-height>
</div>

ResponsiveHeight.html 模板：

<div class="scrollable"
     #scrollable
     (scroll)="moveScrollbar()">
  <ng-content></ng-content>
</div>
<div class="scroll-rail" #scrollbar
    (mousedown)="drag($event)"
></div>

如果我ng server在 Angular 2.3.1 和ng server --aot2.4.7 中运行一切正常，但在 2.4.7 中使用 JIT 编译器，带有可滚动类的 div 会在 ngFor 中的每个即将到来的游戏中传播。

我认为这可以通过几张图片来理解。

这是正确的行为： 在此处输入图像描述

这是奇怪的行为： 在此处输入图像描述

如您所见，响应式高度模板在即将到来的游戏模板中重复。

就像我说的，这不会发生在 2.4.7 中的 AOT 或 2.3.1 中的 JIT 中。

我在应用程序中有另一个页面，除了这个之外，所有页面都可以正常工作。我在路由器不参与的另一个组件中使用了 responsiveHeight 组件，并且可以正常工作。

我会说它与Router + component transclusion + ngFor有关。

版本：

@angular/cli: 1.0.0-beta.31
node: 6.9.1
os: darwin x64
@angular/common: 2.4.7
@angular/compiler: 2.4.7
@angular/core: 2.4.7
@angular/forms: 2.4.7
@angular/http: 2.4.7
@angular/platform-browser: 2.4.7
@angular/platform-browser-dynamic: 2.4.7
@angular/router: 3.4.7
@angular/cli: 1.0.0-beta.31
@angular/compiler-cli: 2.4.7

更新：

如果我删除 ngFor 可以正常工作。如果我删除异步管道并用同步数据填充 ngFor，则不起作用。

更新2：

如果我创建一个包含内容的 noop 组件，那么一切正常：

<div class="row nomargin upcomingGames">
  <noop-transclusion>
    <tl-responsive-height [margin]="15">
            <tl-upcoming-game *ngFor="let game of gamesSubscription |async"
                              [game]="game"
                              color="#8777b4"></tl-upcoming-game>
    </tl-responsive-height>
  </noop-transclusion>
</div>

似乎 ngFor 与此有​​关。

4

0 回答 0