Создание n-экземпляров с разными атрибутами одного и того же компонента - PullRequest
0 голосов
/ 21 января 2020

У меня есть компонент, который имеет в качестве атрибута список строк. Я хотел бы создать n-экземпляры этого компонента с различными списками строк внутри и визуализировать их. Как я могу это сделать?

<mat-sidenav-container>
  <mat-sidenav #sidenav>
    <mat-nav-list>


      <ng-template let-art let-last="last" ngFor [ngForOf]="categories">
        <a mat-list-item [routerLink]="['/category/', art.name]"> {{art.name}} </a>

      </ng-template>



      <a mat-fab color="accent" class="mat-fab-bottom-right fixed z-3" (click)="prueba()">
        <mat-icon>add</mat-icon>
      </a>

    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <div style="height: 88vh;">

      <router-outlet></router-outlet>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

import { Component } from '@angular/core';
import { Routes, Router, Route } from '@angular/router';
import { AppRoutingModule } from './app-routing.module';
import { CategoryComponent } from './category/category.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  routes: Routes = AppRoutingModule.getRoutes();
  categories : Array<CategoryComponent>;
  title = 'app works!';

  i: number;

  constructor(private router: Router){
    this.i = 11;
    console.log(this.routes);
    this.categories = new Array();

  }

  prueba(){

    var a : CategoryComponent = new CategoryComponent();

    a.setName(this.i.toString())

    this.i++;
    this.categories.push(a);


  }

  navegar(ruta:string){
    this.router.navigate([ruta]);
  }
}
...