Элемент HTML появляется дважды в шаблоне углового проекта ядра .net - PullRequest
Новая
       25

Элемент HTML появляется дважды в шаблоне углового проекта ядра .net

0 голосов
/ 02 мая 2018

Я работаю над проектом шаблона Visual Studio 2017 для .net core 2 + шаблон Angular SPA.

У меня проблема с тем, что некоторые html-элементы появляются дважды, 1 - с применением css, а другой - нет. при развертывании приложения это выглядит как на рисунке ниже. Как видите, заполнитель «Выберите номер» и стрелка раскрывающегося списка появляются дважды.

Когда я нажимаю верхнюю стрелку, открывается 2 выпадающих меню с опциями. Если я нажимаю стрелку вниз, открывается только раскрывающийся список вниз. весь div должен быть окрашен в синий цвет, но только элементы "не на месте" - синие.

компонент является компонентом простого NG, но встречается с другими пакетами NPM (например, с пользовательским интерфейсом kendo).

Я предполагаю, что это может быть связано с порядком загрузки 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" }];
    }
}

component with 2 placeholders and 2 dropdowns

1 Ответ

0 голосов
/ 06 мая 2018

Итак, благодаря Джону Веласкесу, я понял, что мне нужно добавить CSS-файл PrimeNG в веб-пакет. На самом деле каждый общий компонент или шрифты 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, когда путь к папке проекта.
...