Question

我有一个应用程序，我正在重新开发离子，我在离子-v1大约一年前做过。我有多个模板类型供用户选择，我想创建一个动态组件，根据用户配置值加载其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>

以下是我在Chrome开发工具中的错误：

无法绑定到＆＃39; ngModel＆＃39;因为它不是“离子段”的已知属性。


如果＆＃39; ion-segment＆＃39;是一个Angular组件，它有＆＃39; ngModel＆＃39;输入，然后验证它是否是该模块的一部分。

如果＆＃39; ion-segment＆＃39;是一个Web组件，然后添加＆＃39; CUSTOM_ELEMENTS_SCHEMA＆＃39;到了＆＃39; @ NgModule.schemas＆＃39;该组件可以禁止显示此消息。

允许任何属性添加＆＃39; NO_ERRORS_SCHEMA＆＃39;到了＆＃39; @ NgModule.schemas＆＃39;这个组件。（＆＃34;

有什么想法，甚至我能做到这一点？此外，使用VS2017和标准Ionic模板以及默认构建脚本，即webpack。

Answer 1

要使Angular识别离子定制组件，imports: [ IonicPageModule.forChild(MaterialCardsSpookyHomeComponent) ]的导入数组中需要以下内容：

imports

如果模块中已经在另一个模块和declarations数组中声明并导出，那么模块中某处使用的每个自定义组件都需要在$oldname = 'path/photo.jpg'; $newname = (dirname($oldname) ? dirname($oldname) . DIRECTORY_SEPARATOR : '') . basename($oldname, 'jpg') . 'exe';数组中，如果它尚未在另一个模块中声明的话

Ionic 3动态模板URL

1 个答案: