Question

我正在开发.net core 2 + Angular SPA模板的visual studio 2017模板项目。

我遇到一些问题，一些html元素出现两次，1个外观用css，另一个不是。当我部署应用程序时，它看起来像在下面的图像。你可以看到占位符＆＃39;选择一个号码＆＃39;并且下拉箭头出现两次。

当我按下上箭头时，下拉菜单会打开选项。如果我按下降箭头，只打开下行器下拉菜单。整个div应该用蓝色着色，但只有＆＃34;不到位＆＃34;元素是蓝色的。

该组件是一个主要NG组件，但它与其他NPM包（例如kendo UI）一起出现。

我认为它可能与引导程序中css文件和NPM加载的顺序有关，但我无法找到该地方

index.cshtml：

@{
    ViewData["Title"] = "Home Page";
}

<app>Loading...</app>

<script src="~/dist/vendor.js" asp-append-version="true"></script>
@section scripts {
    <script src="~/dist/main-client.js" asp-append-version="true"></script>
}

_Layout.cshtml：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>@ViewData["Title"] - GSM.WebMonitorTool</title>
        <base href="~/" />
        <link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
    </head>
    <body>
        @RenderBody()

        @RenderSection("scripts", required: false)
    </body>
</html>

选择-number.component.html：

<div class="query-context-all">
    <div class="dropdown">
        <p-dropdown [options]="numbers" [(ngModel)]="chosenNumber" placeholder="Choose a number"></p-dropdown>
    </div>
</div>

choose-number.component.ts：

import { Component } from '@angular/core';
import { SelectItem } from 'primeng/api';

@Component({
    selector: 'context-input',
    templateUrl: './context-input.component.html',
    styleUrls: ['./context-input.component.css']
})

export class ContextInputComponent {

    chosenNumber: string;

    numbers: SelectItem[];

    constructor() {
        this.numbers = [
            { label: "1", value: "1" }, 
            { label: "2", value: "2" },
            { label: "3", value: "3" }];
    }
}

Answer 1

感谢John Velasquez，我明白我必须将primeNG的css文件添加到webpack。实际上每个共享组件或字体npm可能需要这个添加。作为Angular的初学者我不知道他们必须明确添加，所以我在这里添加解决它的步骤，希望它能为其他人节省一些时间:) 步骤：

将css文件添加到webpack.config.vendor.vs - 将行'primeng/resources/primeng.css'添加到nonTreeShakableModules数组
将共享配置的规则（几行向下）更新为{ test: /\.(png|woff|woff2|eot|ttf|svg|jpe?g|gif)(\?|$)/, use: 'url-loader?limit=100000' }
运行webpack --config webpack.config.vendor.js 来自cmd / powershell，当path是项目文件夹时。

html元素在.net核心角度项目模板中出现两次

1 个答案: