0

Angular Universal がサードパーティの JavaScript および CSS ライブラリのインポートを処理する方法をテストしているところです。使いやすさのために、jQuery と Bootstrap を試してみました。

Universal Starter リポジトリhttps://github.com/angular/universal-starterを使用し、 npm を介して jQuery と Bootstrap をインストールしました。

私app.component.tsはそのようにjQueryを含めましたが、それは完全に機能します。

import { isBrowser, isNode } from 'angular2-universal'
var jQuery: any = require('jquery');

...

@Component({
  changeDetection: ChangeDetectionStrategy.Default,
  encapsulation: ViewEncapsulation.Emulated,
  selector: 'app',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  title = 'ftw';

  ngOnInit(): void {
    if (isBrowser) {
      jQuery('#universal').css({'color': '#FF0000', 'font-size': '25px'})
    }
  }
}

cssファイルをインポートしたいのですが、うまくいきません。app/client.ts次のようにファイル内にインポートしています。

...
// Angular 2
import { enableProdMode } from '@angular/core';
import { platformUniversalDynamic } from 'angular2-universal/browser';
import { bootloader } from '@angularclass/bootloader';

import { load as loadWebFont } from 'webfontloader';

import 'bootstrap/dist/css/bootstrap.css';

// enable prod for faster renders
enableProdMode();
...

実際の Bootstrap css は Webpack バンドル内にありますが、HTML のスタイルはまったく設定されていません。誰もこれで同様の問題を抱えていて、この問題を解決する方法を知っていますか?

4

2 に答える 2

0

動作させるには、universal-starter リポジトリではインストールされないstyle loaderimport 'bootstrap/dist/css/bootstrap.css';が必要です。補足: bootstrap.css をそのまま使用し、universal-starter を使用する場合は、bootstrap.min.css を assets フォルダーにコピーし、index.html にリンク タグを追加します。

于 2017-01-05T10:26:06.810 に答える
-1

Angular CLI プロジェクト フォルダーのルートにある angular-cli.json または angular.json ファイルに移動し、scripts: [] プロパティを見つけて、次のように jQuery へのパスを含めます。

"scripts": [ "../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"]

jQuery を使用するには、jQuery を使用するコンポーネントにインポートするだけです。

import * as $ from 'jquery';
(or)
declare var $: any;

import { Component, OnInit  } from '@angular/core';
import * as $ from 'jquery';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  ngOnInit()
  {
    $(document).ready(function(){
       // your code
    });
  }
}
于 2019-11-28T10:28:30.037 に答える