使用 Angular Routing 渲染两个组件

Question

我目前正在开发一个 Angular 6 应用程序，我想通过单击某个路线来更改页面上的两个组件。我不想创建包含两者的单个组件，而只想更改实际更改的内容（没有重复的 html 标记和数据）。

我该怎么做？

这是一些代码。

主要组件 HTML

<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">

  <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
    <h1 class="h2 text-primary">{{title}}</h1>

    <div class="btn-toolbar mb-2 mb-md-0">
      <div class="btn-group mr-2">
        <button class="btn btn-sm btn-outline-secondary">Esporta domanda client</button>
        <button class="btn btn-sm btn-outline-secondary">Esporta risposta server</button>
      </div>
    </div>
  </div>
  <div class="container-fluid">
    <div class="row d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3">
      <div class="col-6">
        <router-outlet></router-outlet>
      </div>
      <div class="col-6">
        <app-http-response></app-http-response>
      </div>
      <hr/>
    </div>
    <div class="row d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3">
      <div class="col-12 sm-12 md-12 xs-12 lg-12">
        <app-test-cases></app-test-cases>
      </div>
      <hr/>
    </div>
    <div class="row d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3">
      <div class="col-12 sm-12 md-12 xs-12 lg-12">
        <router-outlet></router-outlet>
      </div>
    </div>
  </div>
</main>

主要组件 TypeScript

export class ProcessComponent implements OnInit {
  currentRoute: string;
  title: string;

  constructor(private router: Router) {
  }

  ngOnInit() {
    this.currentRoute = CurrentRoute.getCurrentRoute(this.router);
    this.title = this.currentRoute.charAt(1).toUpperCase() +
      this.currentRoute.substring(2, this.currentRoute.length)
        .replace('-', ' ');
  }
}

App.module.js

const appRoutes: Routes = [{
  path: '', redirectTo: 'processi', pathMatch: 'full'
},
  {
    path: 'processi', component: HttpRequestProcessComponent
  },
  {
    path: 'regole', component: HttpRequestRuleComponent
  },
  {
    path: 'verifica-ordini', component: HttpRequestCheckOrderComponent
  },
  {
    path: 'prodotti-vendibili', component: HttpRequestSalableProductComponent
  }];

现在我只渲染一个组件，但是，如您所见，我想添加另一个组件，它将在第二个 <router-outlet> 标记上呈现。

此外，尽管获得了this.router.url，但标题并未正确更新路线更改，但我认为这是另一个故事。

提前谢谢你。

Answer 1

1. 将outlet 属性添加到您的路线：

   path: 'processi', component: HttpRequestProcessComponent, outlet: 'example'

2. 为您的路由器命名：

   <router-outlet name="example"></router-outlet>

Answer 2

您可以使用 angular 提供的出口功能，下面是基于您提供的代码的伪示例

<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">

 <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
  <h1 class="h2 text-primary">{{title}}</h1>

  <div class="btn-toolbar mb-2 mb-md-0">
    <div class="btn-group mr-2">
      <button class="btn btn-sm btn-outline-secondary">Esporta domanda client</button>
      <button class="btn btn-sm btn-outline-secondary">Esporta risposta server</button>
    </div>
  </div>
 </div>
 <div class="container-fluid">
   <div class="row d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3">
     <div class="col-6">
       <router-outlet name="left"></router-outlet>
     </div>
     <div class="col-6">
       <app-http-response></app-http-response>
     </div>
     <hr/>
   </div>
   <div class="row d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3">
     <div class="col-12 sm-12 md-12 xs-12 lg-12">
       <app-test-cases></app-test-cases>
     </div>
     <hr/>
   </div>
   <div class="row d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3">
     <div class="col-12 sm-12 md-12 xs-12 lg-12">
       <router-outlet name="right"></router-outlet>
     </div>
   </div>
 </div>
</main>

在路由文件中 -

const appRoutes: Routes = [{
  path: '', redirectTo: 'processi', pathMatch: 'full',
  children: [
       { path: '', component: TeamDashboardComponent, outlet: 'left' },
       { path: '', component: ChatroomComponent, outlet: 'right' }
    ]
},
. . .
. . . .
. . . . .
}]

如果您对此有任何疑问，请告诉我..