Блог

Я уже несколько месяцев работаю с Angular 6. У меня есть два компонента: первый (родительский) должен считывать параметр по http-запросу и инициализировать внутренний атрибут; второй (дочерний) принимает этот параметр, используя декоратор @Input для своего собственного атрибута. Я не могу установить родительский атрибут в методе subscribe, атрибут не определен. Есть предложения?

Родительский компонент:

 export class DeliberaComponent implements OnInit {

  private categoria: string = 'delibera';
  private prefix: string;

  constructor(private sistemaService: SistemaService) {
    this.sistemaService.readCategoriaAttributes(this.categoria)
    .subscribe(categoria => {
      this.prefix = categoria.listCategoriaAttribute.filter(attr => attr.chiave === 'prefixNamePdv').pop().valore; 
    });
  }

  ngOnInit() {
  }
}
  

Дочерний компонент:

 export class CreazioneManualeComponent implements OnInit {

  @Input()
  private prefix: string;
  private idpdv: string;

  ngOnInit() {
    this.idpdv = 
    this.prefix.concat(newDate().toDateString());
  }
}
  

Это фрагмент html:

 <sa-creazione-manuale [categoria]="categoria" [prefix]="prefix"></sa-creazione-manuale>
  

Если вы получаете информацию через http, у вас нет ответа до создания вашего дочернего компонента, поэтому при запуске ngOnInit префикс отсутствует.

вы можете сделать это….

     ngOnChanges(change: SimpleChanges) {
        If (change.prefix) {
            this.idpdv = 
            this.prefix.concat(newDate().toDateString());
        }
    } 
  

но это довольно дорого, поскольку он будет проверять if каждый раз, когда выполняется changeDetection в вашем дочернем компоненте…. Если вы можете, лучшей альтернативой было бы просто добавить дату в вашу строку непосредственно в subscribe родительского компонента. Вы также можете создать чистый канал, который сделает это за вас, если вы используете его в html дочернего компонента.

После объяснения @Tzannetos Philippakos я нашел рабочее решение:

 export class DeliberaComponent implements OnInit {

  private categoria: string = 'delibera';
  private prefix: string;
  @ViewChild(CreazioneManualeComponent)
  private childCreazioneManuale: CreazioneManualeComponent;

  constructor(private sistemaService: SistemaService) {
  }
  
  ngOnInit() {
  }
  
  ngAfterViewInit () {
    this.sistemaService.readCategoriaAttributes(this.categoria)
    .subscribe(categoria => {
      let prefix = categoria.listCategoriaAttribute.filter(attr => attr.chiave === 'prefixNamePdv').pop().valore;
      this.childCreazioneManuale.setPrefix(prefix); 
    });
  }
}  

В дочернем компоненте:

  setPrefix(prefix: string){
    this.idpdv = prefix.concat(new Date().toDateString());
    this.headerForm.controls['idpdv'].setValue(this.idpdv)
  }  

HTML:

 <sa-creazione-manuale [categoria]="categoria" ></sa-creazione-manuale>