Question

Angular Universal似乎有一个jQuery的问题。在角度组件中调用简单的jQuery函数会导致整个页面无法完全呈现：

// home.component.ts
import {Component, OnInit} from '@angular/core';

declare var jquery: any;
declare var $: any;

@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
    @Language() lang: string;

    constructor() {
    }

    ngOnInit() {
        $('.tp-banner').show(); // just for the sake of demonstration...
    }
}


// home.component.html
<div class="tp-banner-container">
    <div class="tp-banner">
        This is my home
    </div>
</div>

// front.component.html
<app-header-menu></app-header-menu>
<router-outlet></router-outlet>

// header-menu.component.html
<div class="col-md-6 col-sm-6 col-xs-6">
    <ul id="top_links">
        <li *ngFor="let menuItem of menuItems">
            <span (click)="selectLocale(menuItem.language)">
                {{ menuItem.text}}
            </span>
        </li>
        <li id="social_top">
            <a href="https://facebook.com" target="_blank"><i class="icon-facebook"></i></a>
        </li>
    </ul>
</div>

如您所见，HomeComponent已加载router-outlet中包含的FrontComponent。但似乎只要HomeComponent包含一些jQuery脚本，整个应用程序就不会完全呈现（例如标题菜单中使用的ngFor）。

源代码不完全呈现：

<app-header-menu _ngcontent-c0="" _nghost-c1="">
    <div _ngcontent-c1="" class="col-md-6 col-sm-6 col-xs-6">
        <ul _ngcontent-c1="" id="top_links">
            <!---->
            <li _ngcontent-c1="" id="social_top">
                <a _ngcontent-c1="" href="https://facebook.com" target="_blank"><i _ngcontent-c1="" class="icon-facebook"></i></a>
            </li>
        </ul>
    </div>
</app-header-menu>

一旦删除jQuery部分，一切正常

<app-header-menu _ngcontent-c0="" _nghost-c1="">
    <div _ngcontent-c1="" class="col-md-6 col-sm-6 col-xs-6">
        <ul _ngcontent-c1="" id="top_links">
            <!---->
            <li _ngcontent-c1="">
               <span _ngcontent-c1="">
                   english
               </span>
            </li>
            <li _ngcontent-c1="">
               <span _ngcontent-c1="">
                   deutsch
               </span>
            </li>
            <li _ngcontent-c1="" id="social_top">
               <a _ngcontent-c1="" href="https://facebook.com" target="_blank"><i _ngcontent-c1="" class="icon-facebook"></i></a>
            </li>
         </ul>
    </div>
</app-header-menu>

Angular Universal和jQuery导致页面无法正确呈现

0 个答案: