Question

有关此内容的最新动态，请参阅下面的最后一段代码。两个外部都被处理，ng-template与ng-container一样，但是内容窗格永远不会进入页面。

我正在尝试使用Angular 55中动态分配的窗格数来实现一个Kendo拆分器窗格。我在父组件中有元素，但除非我删除它，否则子组件不会被渲染。

父分离器组件

    //set round icon
    if (photoUrl != null) {
        int color = ContextCompat.getColor(this, R.color.colorPrimary);
        RoundingParams roundingParams= RoundingParams.fromCornersRadius(5f);
        roundingParams.setBorder(color, 1.0f);
        roundingParams.setRoundAsCircle(true);
        imageView.getHierarchy().setRoundingParams(roundingParams);
        imageView.setImageURI(photoUrl);
    }

子窗格组件

import { Component, OnInit } from '@angular/core';
import { BrxDelta } from '../model/BrxDelta';

@Component({
  selector: 'app-all-deltas',
  template: `<kendo-splitter orientation="vertical" style="height: 340px;">

              <app-brx-delta *ngFor="let b of brxDeltas" [brxDelta]="b"></app-brx-delta>

            </kendo-splitter>`,
  styleUrls: ['all-deltas.component.scss']
})
export class AllDeltasComponent implements OnInit {

  brxDeltas: BrxDelta[];

  constructor() {
    this.brxDeltas = [
      new BrxDelta("DELTA1"),
      new BrxDelta("DELTA2")
    ];
  }

  ngOnInit() {
    console.log("BrxTableListComponent init");
    console.log( this.brxDeltas );
  }

}

最新更新......

import { Component, OnInit, Input} from '@angular/core';
import { BrxDelta } from '../model/BrxDelta';

@Component({
  selector: 'app-brx-delta',
  template: `<kendo-splitter-pane size="100px">
                <div class="pane-content">
                  <h3>{{brxDelta.deltaName}}</h3>
                </div>
              </kendo-splitter-pane>
              `,
  styleUrls: ['brx-delta.component.scss']
})
export class BrxDeltaComponent implements OnInit {

  @Input('brxDelta') brxDelta:BrxDelta;

  ngOnInit() {
    console.log( this.brxDelta );
  }

}

Answer 1

你们读过炼金术士吗？你知道最后他回到他开始的地方并找到了他想要的东西吗？是的，这不是那样的。只有在经过大量的示例来回讨论文件后，我才能最终找到答案。虽然教我一点点。

import { Component, OnInit } from '@angular/core';
import { BrxDelta } from '../model/BrxDelta';
import { ChangeDetectorRef } from '@angular/core';


@Component({
  selector: 'app-all-deltas',
  // templateUrl: 'all-deltas.component.html',
  template:`<kendo-splitter orientation="horizontal" style="height: 340px;">

                <kendo-splitter-pane [collapsible]="true" [resizable]="true"
                        *ngFor="let brxDelta of brxDeltas; let i=index; trackBy: trackById">
                <div class="pane-content">
                  <h3>{{brxDelta.deltaName}}</h3>
                </div>
                </kendo-splitter-pane>

            </kendo-splitter>`,
  styleUrls: ['all-deltas.component.scss']
})
export class AllDeltasComponent implements OnInit {

  brxDeltas: BrxDelta[];

    constructor(private cdRef:ChangeDetectorRef) {
    this.brxDeltas = [
      new BrxDelta("DELTA1"),
      new BrxDelta("DELTA2"),
      new BrxDelta("DELTA3")
    ];
  }

  ngOnInit() {
    console.log("BrxTableListComponent init");
    console.log( this.brxDeltas );
  }

  ngAfterViewChecked()
  {
    console.log( "! Detect changes !" );
    this.cdRef.detectChanges();
  }
}

使用Angular 5的Kendo UI Dynamic Splitter窗格

1 个答案: