如何基于Angular 8中的Route更改html布局？

Question

这是我的app.module.ts文件（仅重要片段）：

imports: [
  BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
  ...
  RouterModule.forRoot([

    // basic
    { path: 'basic', component: StartComponent, data: { useBasicLayout: 'yes' } },
    { path: 'basic/workspace/:id', component: WorkspaceComponent },

    // full blown layout
    { path: '', component: StartComponent },
    { path: 'workspace/:id', component: WorkspaceComponent },
  ]).

[我想完成的是，如果URL像这样：'http://example.com/basic'，显示的HTML是基本布局（我定义了ribbon和ribbon-basic之类的组件。] >>

如果仅浏览“ http://example.com/”，则会显示完整的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>

这是我的app.module.ts文件（仅重要片段）：导入：[BrowserModule.withServerTransition（{appId：'ng-cli-universal'}），... RouterModule.forRoot（[//基本{路径：'...

Answer 1

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

Answer 2

在不知道显示内容之前，请避免呈现整个页面：