передать элемент Dynamic Html на основе параметров от родительского к дочернему компоненту в Angular?

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

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

Я получаю сообщение об ошибке в консоли ОШИБКА Ошибка: 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

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

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

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


angular angular-components angular-dynamic-components
person Soumya Gangamwar    schedule 24.06.2019    source источник

Ответы (2)


arrow_upward
3
arrow_downward

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

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' и вместе с ней получить Ref из шаблона для передачи его в ngTemplateOutlet.

person srjkaa    schedule 24.06.2019
comment
@SoumyaGangamwar да, чувак, ссылка прилагается: stackblitz .com/edit/angular-yzzsgs-hcwd1m?file=src/app/ - person srjkaa; 24.06.2019

arrow_upward
1
arrow_downward

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

person user2814332    schedule 24.06.2019