在选项卡上单击使用角度 CLI 动态加载内容

Question

我是 Angular 的新手，我创建了一个选项卡列表，单击选项卡时应该加载相应的内容。单击选项卡时，我可以在控制台中获取值，如下图所示。

Image

我需要在单击选项卡时动态获取选项卡内容。如何在html页面中添加显示内容。

dashboard.component.html

<div class="container-fluid" style="padding-left: 0px!important; padding-right: 0px!important">
<ol class="breadcrumb tab_list" id="combo1">
    <li id="asset"><a (click) = "onClick($event)" *ngFor = "let a of assets" [id] = "a.id" class="btn basic"> {{ a.name }}<img class="img-responsive image" [src] = "imagePath"></a></li>
</ol> 
<router-outlet></router-outlet>

dashboard.component.ts

    import { Component, OnInit } from '@angular/core';
// import { MdTab } from '@angular/material'
import { MatTabsModule } from '@angular/material';
import { RouterModule } from '@angular/router';
import { Tab1Component } from './tab1/tab1.component';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
  imagePath: string;
  constructor() { 
    this.imagePath = '/assets/images/right-arrow.svg'
  }
  values = [
    { id: 1, name: "floor1" },
    { id: 2, name: "floor2" },
    { id: 3, name: "floor3" },
    { id: 4, name: "floor4" }
  ];

  routes = [{
    path: 'tab1', 
    component: Tab1Component
  }];
  assets = [
    { id: 1, name: "ICU" },
    { id: 2, name: "Anesthesia" },
    { id: 3, name: "Cardiology" },
    { id: 4, name: "Gynecology" },
    { id: 5, name: "Neurology"}
  ];

  onClick(event) {
    const newVal = event.target.id;
    console.log(newVal);
    if(newVal == 1) {
      console.log("Content 1");
      var content = "This is content 1";
    } 
    if(newVal == 2) {
      console.log("Content 2");
    }
  }

  tabLoadTimes: Date[] = [];

  getTimeLoaded(index: number) {
    if (!this.tabLoadTimes[index]) {
      this.tabLoadTimes[index] = new Date();
    }

    return this.tabLoadTimes[index];
  }  

    ngOnInit() {
  }
}

Answer 1

这是一个展示方法的堆栈闪电战。

https://stackblitz.com/edit/angular-s8smcd