Блог

У меня есть родительский компонент, у которого есть title поле. Это поле передается дочернему компоненту с помощью @input декоратора. В моем дочернем компоненте я добавил некоторую логику для манипулирования title значением, прежде чем показывать его в моем HTML.

Поскольку моя логика находится в ngInit цепочке дочернего компонента, только в первый раз title поле отражается правильно. Изменения, которые происходят с тех пор, не отражаются. Теперь я знаю, что это потому ngInit , что вызывается один раз, но как мне инициировать изменение от моего родителя к дочернему элементу, сообщив ему перепроверить значение?

РЕДАКТИРОВАТЬ Добавлен фрагмент кода

Компонент заголовка (дочерний)

 export class HeaderComponent implements OnInit {
@Input() title: string | Array<any>;

titleType = 'string';
tabletTitle: string | Array<any>;


constructor() { }

ngOnInit() {

    if ( typeof this.title == 'object' ) {
        this.titleType = 'array';

        // For tablet - only send the last most array item
        this.tabletTitle = [this.title[this.title.length - 1]];     // Has to be in the form of array (to be consistent with other orange header data type)
    } else {
        // Title is string - same for tablet
        this.tabletTitle = this.title;
    }

    // Temporary to show filter button on catalog page
    if ( this.page == 'catalog' ) {
        this.showFilterButton = true;
    }
}
}
  

Шаблон заголовка

     <h1 *ngIf="titleType=='string'">{{title}}</h1>
    <h1 *ngIf="titleType=='array'">
        <ul class="header-breadcrumb">
            <template ngFor let-item [ngForOf]="title | keyValueObject">
                <li title="{{item.value['title']}}">
                    <a *ngIf="item.value['link']" [routerLink]="item.value['link']">{{item.value['title']}}</a>
                    <span *ngIf="!item.value['link']">{{item.value['title']}}</span>
                </li>
                <li *ngIf="!last" class="separator"></li>
            </template>
        </ul>
        <ul class="header-breadcrumb tablet">
            <li *ngFor="let item of tabletTitle | keyValueObject">
                <a *ngIf="item.value['link']" [routerLink]="item.value['link']">{{item.value['title']}}</a>
                <span *ngIf="!item.value['link']">{{item.value['title']}}</span>
            </li>
        </ul>
    </h1>
  

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

 if ( this.parentCatId ) {
    // Push Parent Category name in header title
    this.headerTitle.push({title: 'Parent'});
}

if ( this.subCatId ) {          
    // Push Sub Category name in header title
    this.headerTitle.push({title: 'Child'});
}
  

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

 <app-header [title]="headerTitle"></app-header>
  

Вы можете либо создать @Input() title: string | Array<any> сеттер, либо использовать ngOnChanges() вместо ngOnInit() . ngOnChanges() вызывается каждый раз @Input() при обновлении.

 @Input() set title(value: string | Array<any>) {
  ...
}
  

или

 ngOnChanges() {

    if ( typeof this.title == 'object' ) {
        this.titleType = 'array';

        // For tablet - only send the last most array item
        this.tabletTitle = [this.title[this.title.length - 1]];     // Has to be in the form of array (to be consistent with other orange header data type)
    } else {
        // Title is string - same for tablet
        this.tabletTitle = this.title;
    }

    // Temporary to show filter button on catalog page
    if ( this.page == 'catalog' ) {
        this.showFilterButton = true;
    }
}