angular - 排除破坏 Angular Universal 的组件

问题描述

我使用ng-toolkit将ng add @ng-toolkit/universalAngular Universal 支持添加到我的项目中。

我能够创建没有错误的产品构建，而且我能够运行服务器，再次没有任何错误。当请求到达时它只是“卡住”（nodeJS 不呈现任何输出）。

我发现，我的一个组件正在破坏服务器端渲染。我发现问题出在 Mat-Carousel 上：

零件：

export class BannerComponent {

  slides: any[] = [
    // tslint:disable-next-line:max-line-length
    { image: 'assets/banner/banner-one.png' },
    // tslint:disable-next-line:max-line-length
    { image: 'assets/banner/banner-two.png' },
    // tslint:disable-next-line:max-line-length
    { image: 'assets/banner/banner-three.png' }
  ];

}

模板：

<section class="sec-space-b" id="banner">
    <mat-carousel
        timings="250ms ease-in"
        [autoplay]="true"
        interval="5000"
        color="accent"
        maxWidth="auto"
        proportion="25"
        slides="5"
        [loop]="true"
        [hideArrows]="false"
        [hideIndicators]="false"
        [useKeyboard]="true"
        [useMouseWheel]="false"
        orientation="ltr"
      >
        <mat-carousel-slide
            #matCarouselSlide
            *ngFor="let slide of slides; let i = index"
            overlayColor="#00000000"
            [image]="slide.image"
            [hideOverlay]="false"
        ></mat-carousel-slide>
    </mat-carousel>
</section>

我怎么解决这个问题？我可以以某种方式从服务器端构建中排除特定组件吗？

标签： angulartypescriptnodes

修复很简单，您应该将PLATFORM_ID令牌与isPlatformBrowserorisPlatformServer方法一起使用。

在您的模板中使用以下#ngIf语句：

<section class="sec-space-b" id="banner" *ngIf="isBrowser">

并在组件代码中将isBrowser字段初始化为：

import { isPlatformBrowser } from '@angular/common';
import { Component, OnInit, Inject, PLATFORM_ID } from '@angular/core';


@Component({
  selector: 'app-home-banner',
  templateUrl: './banner.component.html',
  styleUrls: ['./banner.component.scss']
})
export class BannerComponent implements OnInit {

  public isBrowser = isPlatformBrowser(this.platformId);

  constructor(@Inject(PLATFORM_ID) private platformId: any) { }
}

您可以在本文中阅读更多信息（它们在那里使用）： isPlatformServerhttps : //www.twilio.com/blog/create-search-engine-friendly-internationalized-web-apps-angular-universal-ngx-translateisPlatformBrowser

您还可以查看我关于 Angular Universal 的演讲（13:26 - 关于在浏览器和服务器上运行不同的代码）： https ://www.youtube.com/watch?v=J42mqpVsg0k

angular - 排除破坏 Angular Universal 的组件

问题描述

解决方案

推荐阅读