Angular 如何将html模板加载到页面中的选项卡内容中

我有一个

Angular 8

应用程序

通过下面的文章，我了解了

ContentChildern

，

QueryList

等，并构建了一个示例选项卡组件

这就是我的带有标签的应用程序组件的外观

//our root app component
import { Component, ViewChild } from '@angular/core';
import { TabsComponent } from './tabs/tabs.component';

@Component({
 selector: 'my-app',
 template: `
 <my-tabs>
  <my-tab [tabTitle]="'Tab 1'">
    Tab 1 content
  </my-tab>
  <my-tab tabTitle="Tab 2">
    Tab 2 content
  </my-tab>
</my-tabs>
`
})
export class AppComponent { }

//我们的根应用程序组件
从“@angular/core”导入{Component，ViewChild}；
从“./tabs/tabs.component”导入{TabsComponent}；
@组成部分({
选择器：“我的应用程序”，
模板：`
表1内容
表2内容
`
})
导出类AppComponent{}

但是我有很长的HTML模板，因为每个选项卡的内容都是一个简单的字符串

如何将HTML模板指向每个选项卡的选项卡内容？如下所示

 <my-tab [tabTitle]="'Tab 1'">
    //templateUrl -> tab1.content.html
  </my-tab>

//templateUrl->tab1.content.html

谢谢

像这样：

 <nav mat-tab-nav-bar color="accent" backgroundColor="accent">
<a
  mat-tab-link
  routerLinkActive="active"
  [routerLinkActiveOptions]="{ exact: true }"
  [routerLink]="['/customers/update', id]"
>
  Info
</a>
<a
  mat-tab-link
  routerLinkActive="active"
  [routerLink]="['/customers/update', id, 'contacts']"
>
  Contacts
</a>
<a
  mat-tab-link
  routerLinkActive="active"
  [routerLink]="['/customers/update', id, 'locations']"
>
  Locations
</a>
</nav>
<div>
  <router-outlet></router-outlet>
</div>

信息
联络
位置

---

只需将组件加载到路由器中

纯html，还是另一个角度组件？谢谢！但我不会在url中有片段。没有路由回火是可能的吗？您只需在模块中导入一个组件，并在HTML中使用。同时也检查了同样的问题。我真傻。道歉。谢谢