передать динамический HTML-элемент на основе параметров из родительского в дочерний компонент в Angular? - PullRequest
Новая
       33

передать динамический HTML-элемент на основе параметров из родительского в дочерний компонент в Angular?

0 голосов
/ 24 июня 2019

Я хочу передать html-элемент от родителя к потомку, основываясь на таких условиях, как Если пользователь нажимает кнопку в родительском дочернем элементе, должна отображаться кнопка или Если пользователь выбирает chckbox, тогда дочерний элемент должен отображать флажок Это мой сценарий

Чтобы решить эту проблему, я использую ngTemplateOutlet , ngContent через концепции проекции контента в угловых.

Я получаю ошибку в консоли ОШИБКА Ошибка: templateRef.createEmbeddedView не является функцией

Я так пытался 

  <button (click)="getType('button')">Display button in child</button>
  <div>
  <label>checkbox</label>
  <input type="checkbox" (change)="getType('checkbox')">
  </div>
  <app-child>

  <ng-container [ngTemplateOutlet]="dynamicElement"></ng-container>

        <ng-template #tp2>
        <button>Hey I am button passed dynamically from parent</button>
        </ng-template>

          <ng-template #tp3>
        <label>I am checkbox passed from parent</label>
       <input type="checkbox" (change)="getType('checkbox')">
        </ng-template>

Пожалуйста, найдите ссылку, которую я работаю https://stackblitz.com/edit/angular-yzzsgs-dnfgaq?file=src/app/app.component.ts

Есть ли другой способ?

Любая помощь будет заметна

Заранее спасибо

Ответы [ 2 ]

2 голосов
/ 24 июня 2019

Измените ваш код следующим образом: 

export class AppComponent {

  @ViewChild('tp2') public readonly tp2;
  @ViewChild('tp3') public readonly tp3;

  title = 'Tour of Heroes';
  dynamicElement: any;
  heroes = [
    new Hero(1, 'Windstorm'),
    new Hero(13, 'Bombasto'),
    new Hero(15, 'Magneta'),
    new Hero(20, 'Tornado')
  ];
  myHero = this.heroes[0];

  getType (type) {
    console.log(type);
    if (type == 'button') {
      this.dynamicElement = this.tp2;
    } else {
      this.dynamicElement = this.tp3;
    }
  }
}

Кстати, вам нужно импортировать директиву ViewChild из '@ angular / core' и вместе с ней получать ссылки из шаблона для передачи ее в ngTemplateOutlet

1 голос
/ 24 июня 2019

Вы можете использовать концепцию @ViewChild; для дальнейшей информации проверьте его Угловая документация . В документах есть пример компонента обратного отсчета, где родитель запускает своего потомка каждый раз, когда сам родитель запускается.

...