@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

我对延迟加载的Web组件有类似的问题。似乎@Input是在组件初始化后设置的，不会触发更新。

要解决此问题，对于延迟加载的组件，我正在使用getter和setter作为输入并触发初始化逻辑。您可能还需要检查是否在同一区域中，否则，可能需要注入NgZone并使用zone.run（）来触发更新

private _titleKey: string;

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