Angular Как протестировать рендеринг нескольких дочерних компонентов, используя ngSwitch и ngFor - PullRequest
Новая
       43

Angular Как протестировать рендеринг нескольких дочерних компонентов, используя ngSwitch и ngFor

0 голосов
/ 01 мая 2020

Этот компонент получает массив объектов от хост-компонента, а затем выполняет рендеринг с использованием * ngДля различных компонентов типа соответствия.

Я не могу найти какую-либо ссылку для поиска из документов или inte rnet. Невежественный abot, чтобы продолжить с этим типом использования. (Я слышал, angular рекомендую использовать TestHostComponent для подделки хост-компонента, но не могу понять, как?) 

@Component({
  selector: 'app-fields-manage',
  templateUrl: './fields-manage.component.html',
  styleUrls: ['./fields-manage.component.css']
})
export class FieldsManageComponent implements OnInit, AfterViewChecked, OnChanges{

  constructor(private fieldShare: FieldShareService) {
  }

  @Input() dynamicFields: FieldConfig[]; <------ Host Comp binding input

fields-manage.component. html

<ng-container *ngFor="let eachfield of dynamicFields; let i = index" [ngSwitch]="eachfield.type">
    <app-input *ngSwitchCase="'input'" [field]="eachfield" (click)="configureObject(eachfield)"></app-input>
    <app-radiobutton *ngSwitchCase="'radiobutton'" [field]="eachfield" (click)="configureObject(eachfield)"></app-radiobutton>
    <app-button *ngSwitchCase="'button'" [field]="eachfield" (click)="configureObject(eachfield)"></app-button>
    <app-checkbox *ngSwitchCase="'checkbox'" [field]="eachfield" (click)="configureObject(eachfield)"></app-checkbox>
    <app-date *ngSwitchCase="'date'" [field]="eachfield" (click)="configureObject(eachfield)"></app-date>
    <app-select *ngSwitchCase="'select'" [field]="eachfield" (click)="configureObject(eachfield)"></app-select>
</ng-container>
...