@ Input не работает в пользовательском компоненте ionic 3 с загруженной страницы

Question

Я хочу передать параметр titleKey в пользовательский модуль navbar, изолированный в components.module.ts от лениво загруженной страницы.

components.module.ts

@NgModule({
    declarations: [NavbarComponent],
    imports: [
      IonicModule,
      CommonModule],
    exports: [NavbarComponent],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

navbar.component.ts

@Component({
  selector: 'navbar',
  templateUrl: 'navbar.html',
  inputs: ['titleKey']
})
export class NavbarComponent {
  @Input() titleKey:string;


  constructor(private navCtrl:NavController) {
  }
}

Когда я использую это navbar на лениво загруженной странице, ввод не работает

home.html

<ion-header>
    <navbar titleKey="my custom title"></navbar>
</ion-header>

<ion-content>
    .....
</ion-content>

Если я напечатаю результат @Input() titleKey:string внутри navbar.component.ts, он не будет определен.

Я уже пытался вызвать эту панель навигации в других формах, но, похоже, она не работает.

<ion-header>
    <navbar [titleKey]="my custom title"></navbar>
</ion-header>

and

<ion-header>
    <navbar [titleKey]="'my custom title'"></navbar>
</ion-header>

Answer 1

У меня была похожая проблема с лениво загруженными веб-компонентами.Кажется, что @Input устанавливается после инициализации компонента и не запускает обновление.

Чтобы исправить это, для лениво загруженных компонентов я использую геттеры и сеттеры для входов и логику инициализации триггера.Вы также можете проверить, находитесь ли вы в той же зоне, в противном случае вам может потребоваться ввести NgZone и использовать zone.run () для запуска обновления

private _titleKey: string;

@Input()
set titleKey(value: string) { this._titleKey = value; this.ngOnInit(); }
get titleKey(): string { return this._titleKey; }