Как дублировать компонент Angular

Question

При нажатии кнопки Make Duplicate я хочу продублировать содержимое DashboardComponent и разместить его (дублированный DashboardComponent) под оригиналом один (DashboardComponent - это тот, в котором четыре темно-синих квадрата с именами Героев).

Как заставить работать дублирующий компонент? Вот URL-адрес этих проектов Stackblitz: https://stackblitz.com/edit/angular-u3m6pq?file=src%2Fapp%2Fapp.component.ts

Answer 1

Есть несколько способов go с этим справиться, но я постараюсь предоставить решение, которое я бы использовал:

Кнопка «Дублировать» находится в AppComponent, и вам нужен компонент DashboardComponent продублирован. Поскольку DashboardComponent маршрутизируется, вы не можете полагаться на привязку ввода. Итак, чтобы передать событие щелчка в AppComponent компоненту DashboardComponent, я буду использовать сервис:

@Injectable({
  providedIn: 'root'
})
export class DuplicatorService {

   private count = new BehaviorSubject<number>(1);

   incrementCount() {
      const increment = this.count.value + 1;
      this.count.next(increment);
   }

   get count$() {
      return this.count.asObservable();
   }
}

Затем внедрите сервис в свой AppComponent, чтобы кнопка обновляла счетчик в сервисе:

// app.component.ts

  constructor(private duplicatorService: DuplicatorService) {}

  onClick() {
    this.duplicatorService.incrementCount();
  }

Следующим шагом будет создание нового компонента, который будет содержать все дублированные компоненты DashboardComponents, а также отслеживать изменения в счетчике из вновь созданной службы (вы можете использовать. css и. html файлы здесь, если вы хотите немного изменить его стиль):

//dashboard-shell.component.ts

@Component({
  selector: 'app-dashboard-shell',
  template: '<app-dashboard *ngFor="let item of (duplicates$ | async)"></app-dashboard>'

})
export class DashboardShellComponent implements OnInit, OnDestroy {
  duplicates$: Observable<number[]>;
  destroySubject = new Subject<void>();

  constructor(private duplicatorService: DuplicatorService) {}

  ngOnInit() {
    this.duplicates$ = this.duplicatorService.count$.pipe(
      map(count => Array(count)),
      takeUntil(this.destroySubject)
    );
  }

  ngOnDestroy() {
    // do not forget to unsubscribe!
    this.destroySubject.next();
    this.destroySubject.complete();
  }
}

Кроме того, не забудьте обновить маршрутизацию для пути «панель инструментов» к компоненту оболочки:

//app.routing.module.ts

  { path: 'dashboard', component: DashboardShellComponent }

Вот и все - вот как я бы go с этим. Хотя может быть много других способов!