怎么办在角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
  }
];

儿童one.component.html

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

儿童two.component.html

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

我想在孩子1和2的孩子写额外的代码，一旦负载组成。

谁能告诉我哪里出了问题，或采取哪些方法呢？利用辅助的路线和路线分配的ID我已经试过了。但他们没有工作。

我只是想创建同一组件的多个实例，并使得被路由到的特定组件各实例内部渲染使它们内部的路由。

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

}