Question

我目前正在使用 Angular 6 应用程序，并且我想通过单击某个路径来更改页面上的两个组件。我不想创建包含这两者的单个组件，而只是更改实际更改（没有重复的html标签和数据）。

我该怎么做？

这是一些代码。

主要组件HTML

select casedate
     , category
     , casenumber 
     , IncidentInfo 
     , num2report1
     , notes 
     , COUNT(CASE WHEN geocat1=1 THEN 1 END) AS 'Category 1'
     , COUNT(CASE WHEN geocat2=2 THEN 1 END) AS 'Category 2'
     , COUNT(CASE WHEN geocat3=3 THEN 1 END) AS 'Category 3'
     , COUNT(CASE WHEN geocat4=4 THEN 1 END) AS 'Category 4'
from incident
where casedate between '12/01/2017' and '12/31/2017'
group by casenumber
       , casedate
       , category
       , notes
       , incidentinfo
       , num2report1
order by casedate desc

主要组件打字稿

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

App.module.js

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('-', ' ');
  }
}

目前，我仅渲染一个组件，但是，正如您所看到的，我想添加另一个要在第二个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>，但标题仍无法根据路线更改正确更新，但我认为这是另一个故事。

谢谢。

Answer 1

向您的路线添加outlet属性：

path: 'processi', component: HttpRequestProcessComponent, outlet: 'example'
命名路由器：

<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' }
    ]
},
. . .
. . . .
. . . . .
}]

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

使用角度路由渲染两个组件

2 个答案: