Я новичок в angular, я создал список вкладок, где при нажатии на вкладку должен загружаться соответствующий контент.При нажатии на вкладку я могу получить значения в консоли, как показано на изображении ниже.
Изображение
Мне нужно динамически получать содержимое вкладки при нажатии на вкладку.Как добавить показ содержимого в 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() {
}
}