Angular4 使用jquery插件动态产生的html标签，样式表无法正常显示？

Question

1. 问题描述

在Angular4 中引入了jquery插件#jquery-seat-charts，测试jquery正常运行，当使用其插件动态产生html标签时，却发现标签中所有的class都无法正常显示，该class已经确认引入且不冲突。初步思考，是因为angular的加载机制与jquery插件的使用的不同，导致无法正常识别样式。现在依靠我目前的知识水平，还无法解决，恳请社区的朋友们能够指引我思路，万分感谢！

1. 代码截图

引入：

"scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "./assets/js/jquery.seat-charts.js"

      ],

组件逻辑：

import { Component, OnInit } from '@angular/core';
declare const $: any;
@Component({
  selector: 'app-set-seat',
  templateUrl: './set-seat.component.html',
  styleUrls: ['../../../../assets/css/jquery.seat-charts.css', '/set-seat.component.css']
})
export class SetSeatComponent implements OnInit {
    constructor() {
    }
    ngOnInit() {
        let firstSeatLabel = 1;
        const  sc = $('#seat-map').seatCharts({
                map: [
                    'ff_ff',
                    'ff_ff',
                    'ee_ee',
                    'ee_ee',
                    'ee___',
                    'ee_ee',
                    'ee_ee',
                    'ee_ee',
                    'eeeee',
                ],
                seats: {
                    f: {
                        price   : 100,
                        classes : 'first-class',
                        category: 'First Class'
                    },
                    e: {
                        price   : 40,
                        classes : 'economy-class',
                        category: 'Economy Class'
                    }

                },
                naming : {
                    top : false,
                    getLabel : function (character, row, column) {
                        return firstSeatLabel++;
                    },
                },
                legend : {
                    node : $('#legend'),
                    items : [
                        [ 'f', 'available',   'First Class' ],
                        [ 'e', 'available',   'Economy Class'],
                        [ 'f', 'unavailable', 'Already Booked']
                    ]
                }
            });
    }
}

html代码：

<div class="wrapper">
  <div class="container">
    <div class="seatCharts-row"></div>
    <div id="seat-map">
      <div class="front-indicator">Front</div>

    </div>
    <div class="booking-details">
      <h2>Booking Details</h2>

      <h3> Selected Seats (<span id="counter">0</span>):</h3>
      <ul id="selected-seats"></ul>

      Total: <b>$<span id="total">0</span></b>

      <button class="checkout-button">Checkout &raquo;</button>

      <div id="legend"></div>
    </div>
  </div>
</div>

1. 运行结果

实际运行结果：

期待运行结果：

Answer 1

应该是css文件的路径太深了，angular cli在build的时候没有找到css文件。

在.angular-cli.json中引入css, 这样样式就会被全局打包。

"styles": [
   "../jQuery-Seat-Charts/jquery.seat-charts.css"
],

component对应的css还是可以在styleUrls中引入。