как загрузить шаблон html в содержимое вкладок в angular

У меня есть 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>

Спасибо!


angular angular8 angular7
person Kgn-web    schedule 04.11.2019    source источник
comment
Чистый HTML или другой угловой компонент? (stackoverflow.com/questions/31548311/angular-html-binding)   -  person Caramiriel    schedule 04.11.2019

Ответы (1)


arrow_upward
0
arrow_downward

нравится:

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

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

person Ruben    schedule 04.11.2019
comment
Спасибо! но у меня не было бы фрагментов в url. Возможно ли это без закалки маршрута? - person Kgn-web; 04.11.2019
comment
вы можете просто импортировать компонент в свой модуль и использовать ‹app-name-of-component› ‹/app-name-of-component› в своем HTML - person Ruben; 04.11.2019
comment
да. пока что проверил то же самое. Моя глупая. Извинения. Спасибо! - person Kgn-web; 04.11.2019