小编JKa*_*r11的帖子

在这个简单的例子中,我有两个实体:Event和Address.我每晚都运行一个控制台应用程序来从XML源导入事件数据并将其添加到我的数据库中.

当我遍历XML事件节点(在Entity Framework上下文中)时,我检查是否有数据库中已存在给定值的地址记录.如果没有,它会添加一条新记录.

using (DemoContext context = new DemoContext())
{
    foreach (XmlNode eventNode in eventsXml.SelectNodes("/Events/Event"))
    {
        Event newEvent = new Event();

        newEvent.Title = **get from XML**

        Address address = context.Addresses.Where(a =>
            a.Title.Equals(title, StringComparison.OrdinalIgnoreCase) &&
            a.Address1.Equals(address1, StringComparison.OrdinalIgnoreCase) &&
            a.Address2.Equals(address2, StringComparison.OrdinalIgnoreCase) &&
            a.City.Equals(city, StringComparison.OrdinalIgnoreCase) &&
            a.State.Equals(state, StringComparison.OrdinalIgnoreCase) &&
            a.ZipCode.Equals(zipCode, StringComparison.OrdinalIgnoreCase)
        ).FirstOrDefault();

        if (address != null)
            newEvent.Location = address;
        else
        {
            newEvent.Location.Title = title;
            newEvent.Location.Address1 = address1;
            newEvent.Location.Address2 = address2;
            newEvent.Location.City = city;
            newEvent.Location.State = state;
            newEvent.Location.ZipCode = zipCode;
        }

        context.Events.Add(newEvent);
    }

    context.SaveChanges(); …

我想使用 Angular Elements 创建一个 Web 组件库，该库具有默认模板，但允许开发人员覆盖输出。

例如，考虑一个搜索结果组件。我可能有一个如下所示的默认模板：

<h1>Search results for: {{query}}</h1>

但开发人员可能希望将输出更改为此（作为任意示例 - 它需要灵活）：

<h1>You searched for <strong>{{query}}</strong></h1>

我的第一个想法是简单地使用ng-content这样的：

<search-results>
    <h1>You searched for <strong>{{query}}</strong></h1>
</search-results>

然而，这不起作用，并且会直接输出{{query}}.

然后我发现我可以TemplateRef在组件上添加一个输入参数并传入一个ng-template可以解析表达式的元素。这在 Angular 应用程序中运行良好，但我不确定如何使用 Angular Elements 生成的已编译 Web 组件在 Angular 上下文之外执行此操作。

谁能解释一下如何做到这一点？

我正在尝试创建一个结构类似于以下的选项卡组件：

<tabs>
    <tab-item [title]="'Tab 1'">
        **child component that makes database calls in NgOnInit or NgAfterViewInit**
    </tab-item>
    <tab-item [title]="'Tab 2'">
        **child component that makes database calls in NgOnInit or NgAfterViewInit**
    </tab-item>
    <tab-item [title]="'Tab 3'">
        **child component that makes database calls in NgOnInit or NgAfterViewInit**
    </tab-item>
</tabs>

我有条件逻辑来确保子组件仅通过 ng-content 呈现（如果它们位于具有以下代码片段的选定选项卡上）：

<ng-content *ngIf="selected"></ng-content>

虽然从 UI 角度来看这按预期工作，但子元素似乎仍在内部创建，即使它们从未呈现。这是我想避免的事情，因为它会导致在用户选择适当的选项卡之前不需要数据库调用。

我创建了一个大大简化的示例来说明这一点。正如您所看到的，我已经注释掉了 ChildComponent 模板中的 ng-content，但从 ThirdComponent 对 console.log 的调用仍在触发。

有什么办法可以防止这种情况发生吗？我可能可以在选项卡中显示的组件上创建一个界面，然后调用自定义方法来触发数据库调用，而不是使用内置的 Angular 生命周期方法，但如果可能的话，我想避免这种情况。

感谢您的任何帮助，您可以提供！

我正在尝试在 Angular CLI (7.2.3) 项目中使用 Google Charts，但在输入内容时遇到问题。

首先，我使用此命令安装了类型（带或不带 -dev 标志）：

npm install --save-dev @types/google.visualization

执行此操作后，智能感知立即开始在 Visual Studio Code 中工作，并且当我创建如下简单测试时，我没有收到任何突出显示的错误：

const chartBoxStyle: google.visualization.ChartBoxStyle = {};

但是，当我尝试通过运行ng build进行构建时，出现以下错误：

错误 TS2503：找不到命名空间“google”。

我尝试将其添加到我的文件中，但没有成功：

declare const google: any;

我的 tsconfig.json 文件具有以下 typeRoots 内容，我在其中看到 google.visualization 文件夹：

"typeRoots": ["node_modules/@types"]

任何帮助将不胜感激，因为我不知道如何克服这一点。