html 元素在 .net core angular 项目模板中出现两次答案

【问题标题】：html element appear twice in .net core angular project templatehtml 元素在 .net core angular 项目模板中出现两次
【发布时间】：2018-10-12 08:23:35
【问题描述】：

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

我遇到了一个问题，即某些 html 元素出现了两次，其中 1 次出现了应用 css 而另一个没有出现。当我部署应用程序时，它如下图所示。如您所见，占位符“选择一个数字”和下拉箭头出现两次。

当我按下上箭头时，会打开带有选项的 2 个下拉菜单。如果我按下向下箭头，只会打开向下的下拉菜单。整个 div 应为蓝色，但只有“未到位”元素为蓝色。

该组件是 Prime-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>

选择编号.component.html：

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

选择编号.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" }];
    }
}

【问题讨论】：

在模板中设置了 Layout = null，因此布局不会得到 rendered again。
您是否忘记在webpack.config 中添加 prime-NG 的 css 文件？
@KarthikeyanNagaraj 我不确定我理解你所说的模板是什么意思。我应该在哪里添加这一行？
@JohnVelasquez 谢谢！！这就是问题所在。

标签： asp.net angular .net-core

【解决方案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，当路径是项目文件夹时。

【讨论】：