时间戳

首页 > 解决方案 > 如何以角度在标签内容中加载html模板

angular - 如何以角度在标签内容中加载html模板

问题描述

我有一个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>

谢谢！

标签： angularangular7angular8

解决方案

像这样：

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

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

推荐阅读