如何根据Angular 8中的路由更改html布局？

这是我的

app.module.ts

文件（仅重要的代码片段）：

我想实现的是，如果URL是这样的：''所显示的HTML是基本布局（我定义了

ribbon

和

ribbon basic

等组件）

如果仅导航“”，将显示完整的HTML布局

我在app.component.ts中尝试了下一个代码，因为它是第一个启动的组件

import { Component } from '@angular/core';
import { WorkspaceService } from './components/workspace/workspace.service';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {

  basicLayoutEnabled: boolean = false;

  constructor(
    private _wService: WorkspaceService,
    private _activatedRoute: ActivatedRoute,
    private _router: Router) {

    this._activatedRoute.data.subscribe(data => {
      console.log("Data parameters: " + data);
      // the data is empty here
      if (data.useBasicLayout == true) {
        this._wService.basicLayoutEnabled = true;
      }
    });
  }

  ngOnInit() {}    
  ngOnDestroy() {}
}

下面是视图

app.component.html

：

<div fxFlexFill fxLayout="column">
  <div fxFlex="none">
    <app-ribbon *ngIf="!basicLayoutEnabled"></app-ribbon>
    <app-ribbon-basic *ngIf="basicLayoutEnabled"></app-ribbon-basic>
  </div>
  <div fxLayout="row" style="overflow: hidden; flex: auto;">
    <router-outlet></router-outlet>
  </div>
  <div fxFlex="none">
    <app-status-bar fx></app-status-bar>
  </div>
</div>

---

您可以使用路由器检测更改：

constructor(router: Router) {
   this.router.events
     .pipe(filter(event => event instanceof NavigationEnd))
     .subscribe(({ urlAfterRedirects }: NavigationEnd) => {
       const url = urlAfterRedirects.split(';')[0];
       if(url === '/basic') {
         this.displayASpecificHtmlPart = true;
       }
     });
}

---

在不知道显示什么之前，尽量避免渲染整个页面。因此，可以添加以下条件来决定是否显示ng容器：

<ng-container *ngIf="showInterface">
    <div fxFlexFill fxLayout="column">
      <div fxFlex="none">
        <app-ribbon *ngIf="!basicLayoutEnabled"></app-ribbon>
        <app-ribbon-basic *ngIf="basicLayoutEnabled"></app-ribbon-basic>
      </div>
      <div fxLayout="row" style="overflow: hidden; flex: auto;">
        <router-outlet></router-outlet>
      </div>
      <div fxFlex="none">
        <app-status-bar fx></app-status-bar>
      </div>
    </div>
</ng-container>

此外，我考虑使用以下条件：

if ( data.useBasicLayout)

但是，它看起来像是

数据。useBasicLayout

可以有

false

值

更新：

如果要获取管线参数，请使用以下构造：

 constructor(public route: ActivatedRoute) {}

 this.route.queryParams.takeUntil(this.ngUnsubscribe).subscribe(x => {
    console.log(`route params: `, x)
})

---

问题是什么？：）@steppup也许现在这个问题更有意义了。它有效，唯一的问题是在我们设置属性之前，页面已经显示出来了。这不起作用。.data只触发一次，数据参数为空。你这边行吗。

if ( data.useBasicLayout)

 constructor(public route: ActivatedRoute) {}

 this.route.queryParams.takeUntil(this.ngUnsubscribe).subscribe(x => {
    console.log(`route params: `, x)
})