小编BVS*_*BVS的帖子

我的要求是构建一个具有2个或更多html模板的组件,其中每个html模板至少有20个控件,并且基于少数条件加载该特定模板.

注意:我选择了3个不同的模板,因为控件因templateType而异,其中作为输入的单个ts文件和驱动模板中值的保存逻辑保持不变.因此我决定使用3个模板和一个ts文件作为单个组件.

//sub.component.ts
@Component({
     selector: 'sub-component',
     template: `
               <div [ngSwitch]="templateType">
                    <ng-template *ngSwitchCase="'1'"> ${require('./sub1.component.html')} </template>
                    <ng-template *ngSwitchCase="'2'"> ${require('./sub2.component.html')} </template>
                    <ng-template *ngSwitchCase="'3'"> ${require('./sub3.component.html')} </template>
                    <ng-template ngSwitchDefault> ${require('./sub1.component.html')} </template>
</div>
    `
})

我已经尝试过上面的替代方案,因为它看起来像一个简单的解决方案来实现行为,但编译失败,无法找到需要.在AngularJS中,我们有ng-Include来填充任何模板,但它看起来ng-template不支持加载外部html内容.

请不要将此标记为重复,因为出现了许多与此类似的查询,但大多数解决方案已弃用或不适用于Angular 4.请提供替代方案,而不是附加不同的链接.