イオン3ダイナミックテンプレートのURL

Question

私はionic-v1で1年ほど前にやったionicで再開発しているアプリがあります。ユーザーが選択する複数のテンプレートタイプがあり、ユーザー構成値に基づいてtemplateURLをロードする動的コンポーネントを作成したいと考えています。つまり、アプリケーションを実行するとき以外は、コンポーネントをロードして適切なテンプレートを取得する限り、すべてが機能しているので、ngModelが角属性であるかどうかわからないかのようにテンプレートエラーが発生します。 は、ここで私が持っているものです。

import { Compiler, Component, AfterViewInit, OnInit, Injector, ViewChild, NgModule, NgModuleRef, ViewContainerRef } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 

import { SomeService } from '../../app/services/app.services'; 

@Component({ 
    template: `<ng-container #dynamicvc></ng-container>` 
}) 
export class DynamicHome implements OnInit { 
    @ViewChild('dynamicvc', { read: ViewContainerRef }) container; 
    ehi: any; 
    sponsorGroups: any[]; 
    baseUrl: string; 
    selectedSegment: string; 

    constructor(private compiler: Compiler, private injector: Injector, private moduleRef: NgModuleRef<any>, private someSvc: SomeService, private navCtrl: NavController) { 
     let vm = this; 

     vm.selectedSegment = 'home'; 
    } 

    ngAfterViewInit() { 
     let vm = this; 

     const MaterialCardsSpookyHomeComponent = Component({ templateUrl: './materialcardsspooky/materialcardsspooky-home.html' })(class MaterialCardsSpookyHomeComponent { }); 
     const MaterialCardsSpookyHomeModule = NgModule({ declarations: [MaterialCardsSpookyHomeComponent]})(class MaterialCardsSpookyHomeModule { }); 

     let moduleToUse = null; 
     switch (vm.someSvc.template.toLowerCase()) { 
      case 'materialcardsspooky': 
       moduleToUse = MaterialCardsSpookyHomeModule; 
       break; 
     } 

     if (moduleToUse) { 
      vm.compiler.compileModuleAndAllComponentsAsync(moduleToUse).then((factories) => { 
       const f = factories.componentFactories[0]; 
       const cmpRef = f.create(vm.injector, [], null, vm.moduleRef); 
       cmpRef.instance.ehi = vm.ehi; 
       cmpRef.instance.sponsorGroups = vm.sponsorGroups; 
       cmpRef.instance.baseUrl = vm.baseUrl; 
       cmpRef.instance.selectedSegment = vm.selectedSegment; 
       vm.container.insert(cmpRef.hostView); 
      }); 
     } 
    } 

    ngOnInit() { 
     let vm = this; 

    } 
} 

は、ここに私のテンプレートです：

<ion-header> 
    <ion-toolbar no-border-top no-border-bottom> 
    <ion-segment [(ngModel)]="selectedSegment"> 
     <ion-segment-button value="home" no-border-bottom> 
     <ion-icon name="home"></ion-icon> 
     </ion-segment-button> 
    </ion-segment> 
    </ion-toolbar> 
</ion-header> 
<ion-content> 
    <div [ngSwitch]="selectedSegment"> 
    <div *ngSwitchCase="'home'"> 
     ... 
    </div> 
    </div> 
</ion-content> 

そして、ここではクローム開発ツールの私のエラーです：

Can't bind to 'ngModel' since it isn't a known property of 'ion-segment'.

1. If 'ion-segment' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
2. If 'ion-segment' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

任意のアイデアはどのようにか、私が達成することができても、この？また、VS2017と標準のIonicテンプレートを使用して、デフォルトのビルドスクリプト、つまりwebpackを使用します。角度は、以下のNgModuleの輸入配列で必要とされるカスタムコンポーネントオニクス認識させる

Answer 1

：

imports: [ IonicPageModule.forChild(MaterialCardsSpookyHomeComponent) ] 

また、モジュールのどこかで使用するすべてのカスタムコンポーネントのthatsはすでに場合imports配列にする必要があります他のモジュールで宣言され、エクスポートされている場合は配列内に宣言されていません。