使用 Angular Routing 渲染两个组件

Posted 2023-02-23

【中文标题】使用 Angular Routing 渲染两个组件

【英文标题】：Rendering two components with Angular Routing

【发布时间】：2018-12-26 10:51:23

【问题描述】：

我目前正在开发一个 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，但标题并未正确更新路线更改，但我认为这是另一个故事。

提前谢谢你。

【参考方案1】：

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

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

为您的路由器命名：

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

【讨论】：

如果我尝试然后path: 'processi', component: HttpRequestProcessComponent, outlet: 'example', path: 'processi', component: AnotherComponent, outlet: 'example2' 使用正确的路由器插座将无法正常工作。

@Teskin 请与<router-outlet>s 分享您的代码

【参考方案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' 
    ]
,
. . .
. . . .
. . . . .
]

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

【讨论】：

按照您的建议进行操作，我收到以下错误：Error: Invalid configuration of route '': redirectTo and children cannot be used at validateNode (router.js:567) at validateConfig (router.js) js:552) 在 Router.push../node_modules/@angular/router/fesm5/router.js.Router.resetConfig (router.js:3431) 在新路由器 (router.js:3363) 在 setupRouter (router.js :5012) at callFactory (core.js:8242) at _createProviderInstance$1 (core.js:8188) at initNgModule (core.js:8118) at new NgModuleRef (core.js:8844) at createNgModuleRef (core.js:8833)