Question

我需要更改视图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>

Answer 1

如果要在导航器中更改文档的“标题”，请使用Title

public constructor(private titleService: Title ) { }

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

Answer 2

尝试一下：

ItemsPanelComponent：

export class ItemsPanelComponent {
 this.title;

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

这对我有用。

如何动态更改标题？

2 个答案: