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

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

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

Компонент панели мониторинга.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
  }
];

ребенок-one.component.html

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

ребенок-два.component.html

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

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

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

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


angular angular-routing router-outlet angular6 routing
person tanusha reddy    schedule 01.02.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

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

как :

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'
  }

}
person Ganz    schedule 01.02.2019
comment
На самом деле мне нужно, чтобы child1 и child2 были компонентами, чтобы я мог писать в них дополнительный код. - person tanusha reddy; 04.02.2019
comment
в этом случае включите один и два дочерних компонента в компонент панели инструментов, а затем измените отображаемый компонент на основе URL-адреса. я могу показать реализацию, если вам это нужно - person Ganz; 04.02.2019
comment
Да. Можете ли вы показать мне реализацию один раз. Я не понимаю, где я сделал неправильно. Для меня обязательно использовать маршрутизацию и не использовать ngSwitch. - person tanusha reddy; 04.02.2019
comment
вы не можете использовать маршрутизацию и выбирать экземпляр компонента, который вы перезагружаете. в angular вы можете иметь только один экземпляр маршрутизатора на странице. зачем вам нужно иметь две панели инструментов на одной странице? - person Ganz; 04.02.2019