代码之家 › 专栏 › 技术社区 › Immad Hamid

(Angular ng toolkit)生成或运行服务器时没有错误,但浏览器没有显示任何内容

angular

Immad Hamid · 技术社区 · 6 年前

我用过 ng-toolkit 具有 ng add @ng-toolkit/universal 为我的项目添加角度通用支撑。

组件:

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>

我怎样才能解决这个问题?我能从服务器端构建中排除特定的组件吗?

0 回复 | 直到 6 年前

Maciej Treder 6 年前

PLATFORM_ID 令牌和 isPlatformBrowser isPlatformServer

在模板中使用 #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) { }
}

你可以读更多关于 isPlatformServer服务器 和在本文中(此处使用): https://www.twilio.com/blog/create-search-engine-friendly-internationalized-web-apps-angular-universal-ngx-translate

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

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

2 年前

Kael · 在html表格中显示关系api数据-角度

2 年前