Как загрузить HTML шаблон в вкладках содержимого в угловых

Question

У меня есть приложение Angular 8.

Следуя приведенной ниже статье, я получил представление о ContentChildern, QueryList и т. Д. И создал компонент с образцами вкладок.

https://juristr.com/blog/2016/02/learning-ng2-creating-tab-component/

Вот так выглядит мой компонент приложения с вкладками

//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 { }

Но у меня есть длинный HTML-шаблон, поскольку каждая вкладка содержит довольно простую строку.

Как мне указать HTML-шаблон как содержимое вкладки для каждой вкладки? Что-то вроде ниже

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

Спасибо!

Answer 1

вот так:

 <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>

и просто загрузите свои компоненты в свой роутер