как сделать маршрутизацию внутри нескольких экземпляров одного и того же компонента в угловых 6

Question

В моем POC у меня есть два экземпляра приборной панели.Я хочу, чтобы дочерние элементы отображались в соответствующем экземпляре компонента.

Но текущее поведение таково, что даже если я нажимаю кнопку в первом экземпляре, дочерние элементы отображаются в самом втором экземпляре.

Панель инструментов component.html

<div class="border">
  <p>
    dashboard works!
  </p>
  <button [routerLink]="['child1']">one</button>
  <button [routerLink]="['child2']">two</button>
  <div class="border m-1">
    <router-outlet></router-outlet>
  </div>
  <p>-----------------------------------------------</p>
</div>

app.component.html

<div class="row">

  <app-dashboard></app-dashboard>    // instance 1

  <app-dashboard></app-dashboard>   //  instance 2

</div>

app.routing.module.ts

const routes: Routes = [
  { path: 'child1',
  component: ChildOneComponent
  },
  {
    path: 'child2',
    component: ChildTwoComponent
  }
];

child-one.component.html

<p>
  child-one works!
</p>

child-two.component.html

<p>
  child-two works!
</p>

Я хочу написать дополнительный код в дочернем 1 и дочернем 2 после загрузки компонентов.

Может кто-нибудь сказать мне, где я ошибся или какой подход выбрать?Я уже пытался использовать вспомогательные маршруты и назначить идентификатор для маршрутов.Но они не сработали.

Я просто хочу создать несколько экземпляров одного и того же компонента и включить маршрутизацию внутри них, чтобы конкретный компонент, который маршрутизируется, отображался внутри соответствующего экземпляра.

Answer 1

Маршрутизатор является глобальным компонентом, поэтому он не звонит одному компоненту.

если у вас много экземпляров, вам нужно использовать функцию для перезагрузки одного экземпляра.

например:

Dashboard component.html

    <div class="border">
      <p>
        dashboard works!
      </p>
      <button (click)='routeone()'>one</button>
      <button (click)='routetwo()'>two</button>
        <div class="border m-1">
          {{mydata}}
       </div>
      <p>-----------------------------------------------</p>
    </div>

Dashboard component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  mydata;
  constructor( private router: Router) { }

  ngOnInit() {
  }

  routeone(){
    this.mydata = 'childOne'
  }
  routetwo(){
    this.mydata = 'childTwo'
  }

}