離子3動態模板網址

我有一個應用程序，我正在重新開發離子型，一年前我在離子型v1中做過。我有多個模板類型，用戶可以從中選擇，我想創建一個動態組件，它根據用戶配置值加載它的templateURL。因此，除了在運行應用程序時，除了加載組件和獲取正確的模板之外，所有內容都可以工作，它會給出模板錯誤，就好像它不知道ngModel是一個角度屬性。這是我有：離子3動態模板網址

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>

這裏是我的Chrome瀏覽器開發工具的錯誤：

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

If 'ion-segment' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.

If 'ion-segment' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

任何想法如何，甚至如果我能做到這個？此外，使用VS2017和標準的離子模板與默認的構建腳本，即webpack。

來源

2017-10-13 shinsnake

我不確定這是可能的，但你可以嘗試添加到你的NgModule：'進口：[IonicPageModule.forChild（MaterialCardsSpookyHomeComponent）]'。 – David

不錯！謝謝！這確實是在正確的軌道上。這讓我失去了嘗試使用ngModel之類的角度模塊的錯誤，但是現在我收到了有關使用我的模板中使用的自定義組件的錯誤。它說它不認識它，所以試圖找出如何讓那個工作以及... – shinsnake

好，我很高興我可以幫你一下。如果在另一個模塊中聲明瞭自定義組件，並且在聲明數組中（如果它尚未在另一個模塊中聲明），那麼自定義組件也需要位於模塊的imports數組中。 – David

進行角向認識離子含量的自定義組件需要進口陣列NgModule在以下幾點：

imports: [ IonicPageModule.forChild(MaterialCardsSpookyHomeComponent) ]

而且模塊中的某個地方使用的每一個自定義組件這就是需要是imports數組，如果其已在聲明並導出到另一個模塊中，如果它尚未在另一個模塊中聲明，則在declarations數組中。

來源

2017-10-13 22:29:08 David

離子3動態模板網址

回答

相關問題