在angular4及更高版本中引用模板网址，例如ng-include

Question

我想知道在angular 4及更高版本中是否有一种简单的方法可以像在ng-include中一样在模板中使用模板url。

场景：我知道组件的体系结构，但是在我的一个组件中，我有400行模板，并且想要将其移动到块中，例如a.html ， b.html并在我的component.html中将其引用为

<template *ngTemplateOutlet="a html templateUrl here"></template>
<template *ngTemplateOutlet="b html templateUrl here"></template>

如果我使用组件，那么我需要将对象传递给子组件（因为组件充​​当子组件），我想减少代码并且对子组件不感兴趣，这是angularJS中范围为false的模板指令。

Answer 1

您不能这样做，如果您确实不想创建子组件，该怎么做，而不是使用templateUrl ，而是使用template并导入html字符串：

./templates/templateA.ts

export const templateA: string = `
   <div>templateA</div>
`;

./templates/templateB.ts

export const templateB: string = `
   <div>templateB</div>
`;

./templates/templateC.ts

export const templateC: string = `
   <div>templateC</div>
`;

./templates/index.ts

export {templateA} from './templateA';
export {templateB} from './templateB';
export {templateC} from './templateC';

实际组成部分

import {templateA, templateB, templateC} from './templates';

@Component({
   template: `
     ${templateA}
     ${templateB}
     ${templateC}
   `
})

不过，我要强调的是，如果您的组件超过400行模板，则确实建议将其切成可读性和可维护性更高的块。 您可以在根组件中添加组件提供程序的位置