如何根据 Angular 8 中的路由更改 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>

Answer 1

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

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;
       }
     });
}

Answer 2

尽量避免呈现整个页面，直到您不知道要显示的内容。因此，可以添加以下条件*ngIf="showInterface"来决定是否应显示ng-container：

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

打字稿：

export class AppComponent {
  basicLayoutEnabled: boolean = false;
  showInterface = false; // TSLint likes such declaration:)
  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;
      }
      if ( data.useBasicLayout == false || data.useBasicLayout == true) {
          this.showInterface = true;
      }
    });
  }
  ngOnInit() {}    
  ngOnDestroy() {}
}

此外，我想使用以下条件：

if ( data.useBasicLayout)

但是，看起来data.useBasicLayout可以具有false价值。

更新：

如果要采用路由参数，请使用以下构造：

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