离子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动态模板网址

回答

相关问题