Передать данные в Директиву в Angular 9 - PullRequest
Новая
       91

Передать данные в Директиву в Angular 9

2 голосов
/ 21 июня 2020

Я создаю директиву, включающую компонент: HomechildrenComponent 

<p>{{name}}</p>
<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market St, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

и директиву 

@Directive({
  selector: '[appRenderhomechildcp]'
})

export class RenderhomechildcpDirective {
  private name : string;
  @Input('appRenderhomechildcp') set appRenderhomechildcp(name : string){
    this.name = name;
  };

  childComponent : ComponentRef<HomechildrenComponent>;

  constructor(private container : ViewContainerRef, private cpFactoryResolve : ComponentFactoryResolver) 
  { 
    const componentFactory = this.cpFactoryResolve.resolveComponentFactory(HomechildrenComponent);
    this.childComponent = this.container.createComponent(componentFactory);
    this.childComponent.instance.name = this.name;
    
  }

после вызова директивы в Home.Component.ts 

lsFood = ['Candy', 'Milk', 'Juice fruite', 'Cream']

<div *ngFor="let item of lsFood">
    <div [appRenderhomechildcp]="item"></div>
</div>

Но он не может привязать данные из HomeComponent к директиве. Как я могу с этим справиться? Спасибо

1 Ответ

3 голосов
/ 21 июня 2020

Ваше свойство @Input еще не инициализировано в конструкторе. Переместите инициализацию name в ngOnInit , и он должен работать: 

export class RenderhomechildcpDirective implement OnInit {
  ...
  ngOnInit() {
    this.childComponent.instance.name = this.name;
  }

Ng-run Пример

...