Блог

Мне нужно изменить заголовок titleItemPanel представления ItemsPanelComponent в зависимости от того, какое действие применяется editItem() в ItemsPageComponent . Но у меня есть вложенный компонент: ItemsPageComponent -> ItemsMapComponent -> ItemsPanelComponent . Событие getItemPanelTitle генерируется дочерним элементом ( ItemsPanelComponent ), и это событие должно быть принято прародителем ( ItemsPageComponent ). Это событие должно быть передано родительскому ( ItemsMapComponent ) и должно передать его прародителю ( ItemsPageComponent ).

ItemsPageComponent :

 export class ItemsPageComponent {
  @Output() isTitleCreateItem = new EventEmitter<boolean>();
  
  editItem(itemId: string, event) {
   ...
   this.isTitleCreateItem = !this.isTitleCreateItem;
  }  

     <button md-icon-button
       (click)="editItem(item.id, $event)">
            <md-icon>mode_edit</md-icon>
    </button>
   

ItemsPanelComponent :

 export class ItemsPanelComponent {
public titleItemPanel: string;
 ...
 
  getItemPanelTitle(event: boolean) {
    this.titleItemPanel = event ? 'Create' : 'Edit';
  }
}  

 <h4 (isTitleCreateItem)="getItemPanelTitle($event)" class="panel__title"> 
    {{titleItemPanel}}
</h4>  

Если вы хотите изменить «заголовок» документа в навигаторе, используйте Title

 public constructor(private titleService: Title ) { }

  public setTitle( newTitle: string) {
    this.titleService.setTitle( newTitle );
  }
  

Попробуйте это:

ItemsPanelComponent:

 export class ItemsPanelComponent {
 this.title;

  get itemsPanelTitle() {
   this.title= this.isCreateItem ? 'Create' : 'Edit';
  }
}
<h4 class="panel__title">{{title}}</h4>
  

У меня это работает.