在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行模板，則確實建議將其切成可讀性和可維護性更高的塊。 您可以在根組件中添加組件提供程序的位置