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中编写其他代码。

谁能告诉我我哪里出了问题或采取哪种方法？我已经尝试使用辅助路由并将ID分配给路由。但是他们没有用。

我只想创建同一组件的多个实例，并在其中启用路由，以便将路由的特定组件呈现在各自的实例中。

Answer 1

路由器是一个全局组件，因此它不会局限于一个组件。

如果实例很多，则需要使用一个函数来重新加载一个实例。

like：

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

}

如何在角度6

1 个答案: