动态模板Url in Angular 8.

Question

正在浏览角度文档。很明显，在装饰器的 templateUrl 属性中没有动态导入模板@Component规定，那么有没有办法或解决方法可以在 angular7+ 中实现这一点？

我的模板可以超过两个，实际上在大多数情况下，到目前为止超过 4 个。问题是我有大约四个网站共享相同的代码和功能，但 4 个站点的每个相应页面的布局不同。所以我只需要一个动态模板 Url 引用来使用相同的代码库，但只是根据验证当前网站的某些条件切换模板(可能来自 env 变量(

Answer 1

您可以使用自己的模板创建 4 个不同的组件，并将共享代码移动到服务中，然后将该服务注入所有 4 个组件中 添加一个父组件，该父组件将决定应使用哪个组件

Answer 2

对于这种情况，我的首选方法是创建一个抽象的父组件和 4 个子组件。 该组件上的模板将被忽略。 子组件可以只是样板。 您可以选择重写方法、组合方法，或者不执行任何操作并纯粹使用父方法。 这不是完成动态模板的最简洁方法，但我发现代码更标准化且更容易遵循，尤其是在您需要特定模板的专用方法时。 您需要使用 ng-switch 或其他控制方法来动态选择要使用它的适当组件。

@Component({
selector: 'app-parent-component'
})
export abstract class ParentComponent<FormModel> implements OnInit 
{
...
}

@Component({
selector: 'app-child-1',
templateUrl: './child-1.component.html',
styleUrls: ['./child-1.component.scss'],
})
export class Child1Component extends ParentComponent<LoginFormModel> implements OnInit {
...
}