1

私の ng2 モジュール内では、別のモジュールによって関数が呼び出され、オブジェクトが作成され、それがテンプレートの *ngFor にバインドされた配列にプッシュされます。ドキュメントhttps://angular.io/docs/ts/latest/api/common/index/NgFor-directive.htmlによると、変更を自動的に検出する必要があります。配列をコンソールログに記録できますが、すべてがそこにありますが、セレクタータグは空のままです。テストとして静的配列を使用すると、機能します。ここと他のサイトの一見類似した質問とドキュメントの ChangeDetectorRef をすべて調べましたが、見つかったのは数か月前のもので、試してみるとエラーが発生しました。

これは、marker.component.html です。

<div *ngFor="let Marker of Markers" [ngStyle]="Marker.style" (click)="scrollXY(Marker.scrollX, Marker.scrollY)" class="cq">
    {{Marker.title}}
</div>

そしてこれはmarker.component.tsです：

import { Component } from '@angular/core';
import { Marker } from './marker';
import { WindowService } from '../../window.service';

@Component({
  selector: 'cm-marker',
  templateUrl: 'marker.component.html',
  styleUrls: ['marker.component.css']
})
export class MarkerComponent {

  Markers: Marker[];
  nx0: number;
  ny0: number;
  nx1: number;
  ny1: number;

  constructor(private windowService: WindowService) {
    this.Markers = [
      {
      title: 'Token',
      scrollX: 0,
      scrollY: 0,
      style: {
        'position': 'absolute',
        'z-index': (200 - 5),
        'left': 199900 +'px',
        'top': 199900 +'px',
        'background-color': '#587188'
      }
    }
    ]
  }

  scrollXY(x, y) {
    this.windowService.scrollXY(x, y);
  }

  createMarker(cmelement, x: number, y: number, x1: number, y1: number) {

    let m = (cmelement.y1 - cmelement.y0)/(cmelement.x1  - cmelement.x0);
    let height = Math.abs(cmelement.y1 - cmelement.y0);
    let width = Math.abs(cmelement.x1 - cmelement.x0);
    let sin = (cmelement.y1 - cmelement.y0)/Math.sqrt(Math.pow(height, 2)+Math.pow(width, 2));
    let cos = (cmelement.x1  - cmelement.x0)/Math.sqrt(Math.pow(height, 2)+Math.pow(width, 2));
    let d = 400 * (1 - Math.sqrt(Math.abs(cos * sin)));
    if(x1 == 0 && y1 == 0){
      this.ny0 = Math.ceil(y + (sin * d));
      this.nx0 = Math.ceil(x + (cos * d));
      this.ny1 = Math.ceil(y + height - (sin * d/2));
      this.nx1 = Math.ceil(x + width - (cos * d/2));            
    }
    if(x1 == 0 && y1 != 0){
      this.ny0 = Math.ceil(y + height + (sin * d));
      this.nx0 = Math.ceil(x + (cos * d));
      this.ny1 = Math.ceil(y - (sin * d/2));
      this.nx1 = Math.ceil(x + width - (cos * d/2));            
    }
    if(x1 != 0 && y1 == 0){
      this.ny0 = Math.ceil(y + (sin * d));
      this.nx0 = Math.ceil(x + width + (cos * d));
      this.ny1 = Math.ceil(y + height - (sin * d/2));
      this.nx1 = Math.ceil(x - (cos * d/2));            
    }
    if(x1 != 0 && y1 != 0){
      this.ny0 = Math.ceil(y + height+ (sin * d));
      this.nx0 = Math.ceil(x + width + (cos * d));
      this.ny1 = Math.ceil(y - (sin * d/2));
      this.nx1 = Math.ceil(x - (cos * d/2));            
    }
    let marker0 = {
      title: cmelement.links[1].title,
      scrollX: cmelement.x1,
      scrollY: cmelement.y1,
      style: {
        'position': 'absolute',
        'z-index': (200 - cmelement.prio),
        'left': this.nx0,
        'top': this.ny0,
        'background-color': cmelement.style.object.color0
      }
    }
    // console.log(marker0);
    this.Markers.push(marker0);
    let marker1 = {
      title: cmelement.links[0].title,
      scrollX: cmelement.x0,
      scrollY: cmelement.y0,
      style: {
        'position': 'absolute',
        'z-index': (200 - cmelement.prio),
        'left': this.nx1,
        'top': this.ny1,
        'background-color': cmelement.style.object.color0
      }
    }
    this.Markers.push(marker1);
    // console.log(this.Markers);

  }
}

静的に書き込まれた「トークン」が表示され、期待どおりに機能しますが、新しく追加されたものはありません。

4

1 に答える 1

0

@Carbonsound1 のアドバイスのおかげで、解決策が見つかりました。

関数 @ViewChild は、コンポーネントまたはディレクティブを親コンポーネントにバインドします。

RC6 の重要事項: 以前に廃止された @Component.directives は削除されました。そのため、コンポーネント内で宣言するとエラーがスローされます。代わりに、app.module ファイルの宣言で宣言する必要があります。

Carbonsound1s plnkrに次の変更をフォークしました。

更新された app.module.ts:

import { AppComponent }   from './app.component';
import { MarkerComponent } from './marker.component';

@NgModule({
  imports: [ 
    BrowserModule,
    CommonModule
  ],
  declarations: [ AppComponent,
                  MarkerComponent],
  bootstrap:    [ AppComponent ],
  entryComponents: [  ]
})
export class AppModule { }

更新された app.component.ts:

@Component({
  selector: 'my-app',
  template: `
  <button (click)="createMarker()">create marker</button>
  <my-marker></my-marker>
  `
})
于 2016-09-04T08:59:59.897 に答える