javascript - 使用同一组件的不同属性构建 n 个实例

Question

我有一个组件，它有一个字符串列表作为属性。我想创建该组件的 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]);
  }
}

标签： javascriptangularfrontend