Как отобразить свойства дочернего компонента в переданный ng-шаблон - PullRequest
Новая
       21

Как отобразить свойства дочернего компонента в переданный ng-шаблон

0 голосов
/ 31 мая 2019

У меня есть дочерний компонент с html-шаблоном по умолчанию, и я хочу использовать этот компонент с другим html-шаблоном (переданным из parent).Я использовал ngTemplateOutlet для выбора шаблона, но дочерние свойства не отображаются, когда я использую пользовательский шаблон.

@Component({
  selector: 'sbase-tags',
  template: '
    <ng-container *ngTemplateOutlet="customTemplate?customTemplate : defaultTemplate">
    </ng-container>

    <ng-template #defaultTemplate>
      <ul>
        <li *ngFor='let item of inputList'>
          {{item.name}}
        </li>
      </ul>
    </ng-template>`
})
export class TagsComponent implements OnInit {
  @Input() inputList: any[];
  @Input() customTemplate: TemplateRef<any>;

  constructor() {
  }

  ngOnInit(): void {
  }
}


Parent component:

@Component({
  selector: 'app-root',
  template: ` 
<sbase-tags 
    [inputList]="parentItemsList"
    [customTemplate]="customTagComponentTemplate"></sbase-tags>
  <ng-template #customTagComponentTemplate>
    <div>
      <div *ngFor='let item of inputList'>
        {{item.name}}
      </div>
    </div>
  </ng-template>
  `
})


export class AppComponent {
  parentItemsList = [
    {
      name: 'Item1',
    },
    {
      name: 'Item2',
    },
  ];
}'

Я ожидаю, что inputList будет отображаться, когда предоставляется пользовательский шаблон, но он не определен.Любая идея о том, как использовать функциональность дочернего компонента и пользовательский шаблон HTML?

...