小编Mar*_*rgh的帖子

我注意到没有括号可以绑定东西.有什么不同？

打字稿:

import { Component, Input } from '@angular/core';

@Component( {
    selector: 'my-comp',
    templateUrl: `
    input is {{foo}}
  `

})
export class myComponent {
    @Input() public foo: string;

    constructor() { }
    }

HTML:

情况1

<my-comp [foo]="bar"></my-comp>

案例2

<my-comp foo="bar"></my-comp>

我正在制作一个Angular项目,用户可以在其中切换语言.是否可以使语言环境动态化？

我已经看到你可以在NgModule中添加它,但我猜它放在那里时不是动态的吗？或者我可以通过某种服务或某种方式改变它吗？

因此,当我从查询中得到响应时,我可以看到有一个加载属性.但我真的不明白为什么他们会传递它.因为当你得到响应时,意味着加载完成,因此加载总是错误的.

有没有办法,我可以使用此加载属性,以便我可以例如在呼叫仍在加载时出现加载图标？

我在Angular 2环境中有以下代码:

public apolloQuery = gql`
    query {
        apolloQuery 
    }`;

const sub = this.apollo.watchQuery<QueryResponse>({
    query: this.apolloQuery 
}).subscribe(data => {
    console.log(data);
    sub.unsubscribe();
});

并且来自数据对象的日志包含我正在谈论的加载属性,这始终是错误的.

我知道我可以创建自己的布尔属性并检查这种方式,但我只是想知道我是否可以使用Apollo提供的内置加载属性？

有没有办法使 datepipe 动态化，以便如果它是美国浏览器，则 d​​atepipe 返回美国格式（yyyy/MM/dd），而当它是欧洲浏览器时，它返回欧洲格式（dd/MM/yyyy）？

谢谢

所以我从API中获取了这个相当复杂的数组,其中包含大量带有对象等的嵌套数组.它看起来像这样:

    public data: any[] = [
    {
        language: 'Dutch',
        sources: [
            {
                source: 'De Redactie',
                channels: [
                    { channel: 'binnenland', value: false },
                    { channel: 'buitenland', value: false },
                    { channel: 'sport', value: false },
                    { channel: 'cultuur en media', value: false },
                    { channel: 'politiek', value: false },
                    { channel: 'financien', value: false }
                ]
            },
            {
                source: 'Tweakers',
                channels: [
                    { channel: 'hardware', value: false },
                    { channel: 'software', value: false },
                    { channel: 'tech', value: false }, …

What do I want to achieve?

I want my Angular Material(v11) datepicker to use the DD-MM-YYYY format in an Angular version 11 project.

What have I tried?

I tried using the MatMomentDateModule but this uses the moment.js library. This in turn will use all the locales in the bundle, which inceases the bundle size with 400kb. I have added CUSTOM_DATE_FORMATS to the providers of my app.module.ts which looks like this:

const CUSTOM_DATE_FORMATS = {
    parse: {
        dateInput: 'DD-MM-YYYY',
    },
    display: …

我在文档中的任何地方都找不到它，但是当我单击作为父组件一部分的组件中的某个东西时，Node.contains（）函数不起作用。

我的父组件如下所示：

<div class="body">
    <div class="item" *ngFor="let item of sortedItems;">
        <cv-checkbox></cv-checkbox>
        <cv-svg-icon></cv-svg-icon>
    </div>

    <div class="drop-zones" *ngFor="let zone of sortedItems.length + 1 | numberToArrayPipe;>
        <div class="drop-zone"></div>
    </div>
</div>

如您所见，我的父组件中有两个Angular组件：cv-checkbox和cv-svg-icon。我向我的父组件添加了一个指令，如下所示：

<cv-layer-manager cvClickOutside (clickOutside)="toggleLayerManager()"></cv-layer-manager>

我在哪里检查单击的节点是否包含在父级中，如下所示：

@HostListener('document:click', ['$event']) public onClick(event: MouseEvent) {
    const clickedInside = this._elementRef.nativeElement.contains(event.target);
    if (!clickedInside) {
        this.clickOutside.emit();
    }
}

如果我单击普通的HTML组件，那么一切都会按预期运行，但是当我单击Angular组件时，则不能正常运行。包含不检查Angular组件内部是否正确？

我不太明白为什么我需要在下面的代码中添加 markForCheck() 以使更改可见。为什么我的@Input() 没有触发变化检测？

我正在将我的项目重构为 OnPush。这两个组件都启用了 OnPush。据我了解，当启用此功能并且 Input() 更改（例如messages）时，更改检测将被触发。

在下面的代码中，我通过graphqlService. 当我收到调用时，我会对传入的数据进行一些解析，然后将其设置为informationMessages属性，该属性cv-messages通过其messages属性绑定到子组件。

结果是该ngOnChanges函数仅在informationMessages属性初始化时被调用一次。但不是当最终解析的数据设置为它时。

如果我添加 markForCheck() 它工作正常。

考虑这个父组件，它有一个这样的模板：

<cv-messages [messages]="informationMessages"></cv-messages>

以及带有这段代码的打字稿文件：

informationMessages: InformationMessageType[] = [];

ngOnInit() {
    this.graphqlService.loadInformationMessages().subscribe(data => {
        const informationMessages: InformationMessageType[] = data;

        .... // parsing stuff

        this.informationMessages = informationMessages;
        // add markForCheck() here
    });
}

消息组件有一个 ngOnChanges 函数，如下所示：

ngOnChanges(changes) {
    console.log(this.constructor.name ' CHANGE:', changes);
}

更新：

您可以在以下答案的评论中找到解决方案。基本上，当异步更改时不会触发更改检测@Input()。所以在这种情况下，我们需要添加一个markForCheck()来强制更改检测。

我在排序和具有 trackBy 函数的数组时遇到问题。用例如下：

我有一个项目数组。所有这些项目都有一个 z-index 属性。我还有一个图层管理器​​，可以编辑每个项目的 z-index。当我想保存我的项目时，我想根据每个项目的 z-index 属性对我的数组进行排序。我的 ngFor 上还有一个 trackBy，用于限制 *ngFor 上的更改检测量。

使用 *ngFor 上的 trackBy 函数，当我对数组进行排序时，项目会切换位置（这很糟糕）。如果我删除 trackBy 函数，则不会发生这种情况，并且项目将根据 z-index 进行排序。

*ngFor：

<div class="item" *ngFor="let item of items; let i = index;trackBy:getUniqueIdentifier">

trackBy 函数：

getUniqueIdentifier(index, item) {
    return this.items.length + ', ' + this.languages._previewLanguage;
}

如您所见，当项目的长度发生变化或我切换语言设置时，*ngFor 会发生变化。我试过添加，+ ', ' + item.zIndex但这不起作用。

排序功能：

sortItemsArrayByZIndex() {
    this.items.sort((i1, i2) => {
        return (i1.zIndex - i2.zIndex);
    });
}

所以看起来 trackBy 和这个 sort 函数由于某种原因存在冲突。现在的结果是，当我使用 sort 函数时，items 数组会根据 z-index 进行排序，但 item 也会切换位置，这意味着它们的维度属性由于某种原因而切换。 …