angular - 使用 Angular Universal 在 Angular 中执行服务器端渲染时，页面重定向后无法看到我的 html 源代码

问题描述

我正在开发一个 Angular 博客应用程序，我已经在我的博客应用程序中实现了服务器端渲染。我遇到的问题是，在我的博客主页上，我可以通过单击来自 Node.js API 的Ctrl+来查看所有博客及其源代码内容，单击u所选博客后，它将重定向到该博客并显示其内容，但是不是 HTML 源代码（存储在本地存储中以减少 API 调用，我从本地存储中获取它以显示选定的博客内容）。

我还读到 SSR 不支持窗口、文档和位置对象，并且本地存储是一个窗口属性，因此我已经按照此链接https://stackoverflow.com/a/57781883使用它。

在遵循所有教程和文档之后，我尝试了所有可能的方法，但对我没有用。帮助将不胜感激。提前致谢。

下面是我附上的代码

主页组件.html

<owl-carousel-o [options]="bannerSlider">
            <ng-template carouselSlide>
                <div class="sliderblogbox">
                    <img class="penci-image-holder" src="{{recentPost[0]?.featured_image}}">
                    <div class="sliderblogbox-text">
                        <h3><a (click)="showDetails(recentPost[0])">{{recentPost[0]?.title}}</a></h3> <span
                            class="daytime">{{recentPost[0]?.post_date * 1000 | date:'mediumDate'}}</span>
                    </div>
                </div>
            </ng-template>
            <ng-template carouselSlide>
                <div class="sliderblogbox">
                    <img class=" penci-image-holder" src={{recentPost[1]?.featured_image}}>
                    <div class="sliderblogbox-text">
                        <h3><a (click)="showDetails(recentPost[1])">{{recentPost[1]?.title}}</a></h3> <span
                            class="daytime">{{recentPost[1]?.post_date * 1000 | date:'mediumDate'}}</span>
                    </div>
                </div>
            </ng-template>
            <ng-template carouselSlide>
                <div class="sliderblogbox">
                    <img class=" penci-image-holder" src={{recentPost[0]?.featured_image}}>
                    <div class="sliderblogbox-text">
                        <h3><a (click)="showDetails(recentPost[0])">{{recentPost[0]?.title}}</a></h3> <span
                            class="daytime">{{recentPost[0]?.post_date * 1000 | date:'mediumDate'}}</span>
                    </div>
                </div>
            </ng-template>
            <ng-template carouselSlide>
                <div class="sliderblogbox">
                    <img class=" penci-image-holder" src={{recentPost[1]?.featured_image}}>
                    <div class="sliderblogbox-text">
                        <h3><a (click)="showDetails(recentPost[1])">{{recentPost[1]?.title}}</a></h3> <span
                            class="daytime">{{recentPost[1]?.post_date * 1000 | date:'mediumDate'}}</span>
                    </div>
                </div>
            </ng-template>
  </owl-carousel-o>

主页组件.ts

bannerSlider: OwlOptions = {
    loop: false,
    navText: [''],
    nav: true,
    margin: 10,
    dots: false,
    responsive: {
      0: {
        items: 1
      },
      600: {
        items: 2
      },
      1000: {
        items: 2
      }
    }
  };
  relatedPost: OwlOptions = {
    loop: true,
    navText: [''],
    nav: true,
    margin: 15,
    dots: false,
    responsive: {
      0: {
        items: 1
      },
      600: {
        items: 2
      },
      1000: {
        items: 3
      }
    }
  };

  constructor(private _service: ServiceService, private router: Router) { }
  recentPost = [];
  ngOnInit(): void {
    this.getRecentPost()
  }
  getRecentPost() {
    let key = 'slider';
    this._service.getRecentPostSlider(key).subscribe(res => {
      if (!res.error) {
        this.recentPost = res.data.data;
      }
    })

  }

  showDetails(post) {
    localStorage.setItem('post', JSON.stringify(post));
    this.router.navigate([`/${post.title_abbr}/`]);
  }

BlogPost 组件.html

<div class="largeblog-area">
                        <div class="largeblog-content blogdetailtop">
                            <h6><a href=""> {{post?.category}} </a> </h6>
                            <h2>{{post?.title}}</h2>
                            <h5><span>written by {{post?.author}} </span> |
                                <span>{{post?.post_date * 1000 | date:'mediumDate'}}</span> </h5>
                        </div>


                        <div class="largeblogimg"><img alt="img" src="{{post?.featured_image}}"></div>
                        <div class="largeblog-content">
                            <p [innerHTML]="post?.description"></p>

                            <div class="post-tags">
                                <a href="#">fresh</a>
                                <a href="#">life</a>
                                <a href="#">style</a>
                                <a href="#">travel</a>
                            </div>


                        </div>

                        <div class="largeblog-bottombox">
                            <div class="largeblog-date">
                                <span><i class="fa fa-clock-o" aria-hidden="true"></i> July 5, 2017</span>
                            </div>
                            <div class="largeblog-social">
                                <ul>
                                    <li><a href="" title="Like"><i class="fa fa-heart-o" aria-hidden="true"></i></a>
                                    </li>
                                    <li><a href="" title="Facebook"><i class="fa fa-facebook"
                                                aria-hidden="true"></i></a> </li>
                                    <li><a href="" title="Twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                                    </li>
                                    <li><a href="" title="Pinterest"><i class="fa fa-pinterest"
                                                aria-hidden="true"></i></a> </li>
                                </ul>
                            </div>


                        </div>
 </div>

BlogPost 组件.ts

post: any;

  constructor(private meta: Meta, private router: Router, private titleService: Title,
    private globle: Globals, private _interaction: CommunicationService, private route: ActivatedRoute) {
    this.post = JSON.parse(localStorage.getItem('post'));
    if (this.post && this.post.meta_description !== '') {
      this.meta.addTag({ name: 'title:', content: this.post.meta_description });
    }
  }
  ngOnInit(): void {
    console.log(this.post);

    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        this.post = JSON.parse(localStorage.getItem('post'));
      }
    });
  }

标签： angularserver-side-renderingangular9angular-universal

angular - 使用 Angular Universal 在 Angular 中执行服务器端渲染时，页面重定向后无法看到我的 html 源代码

问题描述

解决方案

推荐阅读