小编Lui*_*mas的帖子

在 Spring Data Rest 项目中处理延迟加载代理时，使用 Jackson 的Hibernate4Module来处理序列化问题。

一般来说，它解决了 Jackson 尝试序列化未初始化代理的问题，但一个副作用是 JSON 输出不同：

直接获取：api/cases/5400

{
   "id": 5400,
   "practiceReference": "DWPYI9"
}

通过延迟加载的 @ManyToOne 获取：api/submissions/11901/parentCase

{
   "content": {
      "id": 5400,
      "practiceReference": "DWPYI9"
   }
}

通过非延迟加载的 @ManyToOne 获取：api/submissions/11901/parentCase

{
   "id": 5400,
   "practiceReference": "DWPYI9"
}

从上面可以看出，序列化惰性@ManyToOne关联时 JSON 表示有所不同：实体包装在content节点中。

如果关联是非惰性的，则无论路径如何，都会写入相同的表示形式。

这是否有原因，并且可以以某种方式阻止附加的“内容”节点吗？

2017 年 2 月更新：

我在这里找到了相同的（已删除的）问题：

/sf/ask/2323618811/ different-resulting-jsons-when-serializing-lazy-objects-and-simple-objects

这是从这个 github 问题中引用的。另外，这里报告了，所以似乎是一个已知问题：

我正在将我们的业力测试迁移到旧的 Angular 9 应用程序中的 Jest，并且面临一些测试失败的问题，并出现以下类型的异常：

类型错误：类构造函数 SomeComponentClass 无法在没有“new”的情况下调用

我遵循 Jest 设置指南并参考了其他一些独立指南，我的设置如下：

笑话配置.js

module.exports = {
    preset: "jest-preset-angular",
    setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
    globals: {
      'ts-jest': {
        tsconfig: '<rootDir>/src/tsconfig.spec.json',
        stringifyContentPathRegex: '\\.(html|svg)$',
      },
    },
    coverageDirectory: 'coverage',
    coverageReporters: ["html", "text-summary", "json-summary", "cobertura"],
    transform: {
        '^.+\\.(ts|js|html)$': 'jest-preset-angular',
    },
    snapshotSerializers: [
      'jest-preset-angular/build/serializers/no-ng-attributes',
      'jest-preset-angular/build/serializers/ng-snapshot',
      'jest-preset-angular/build/serializers/html-comment',
    ],
    testEnvironment: "jsdom",
    transformIgnorePatterns: [
        "node_modules/(?!@o3|@al|ui-metadata)"
    ],
    testPathIgnorePatterns: [
        "<rootDir>/node_modules/",
        "<rootDir>/dist/",
        "<rootDir>/cypress/",
        "<rootDir>/src/test.ts/"
    ],
    reporters: [ "default" ],
    testMatch: [
        "<rootDir>/src/exposures/**/*.spec.ts"
    ]
  };

测试设置.ts

import 'jest-preset-angular/setup-jest';
import '@angular/localize/init';
Object.defineProperty(window, 'CSS', { value: null }); …

使用 Angular Animations 可以在元素及其子元素进入或离开视图时向它们添加过渡/动画，如下所示：

@Component({
  animations: [
    trigger('containerTrigger', [
      transition(':enter', [
        style({ opacity: 0, transform: 'translateY(-10px)' }),
        animate('250ms 100ms', style({ opacity: 1, transform: 'none' })),
      ]),
    ]),
  ]
})

虽然这工作正常，但当向所选元素及其子元素添加更复杂的过渡/动画时，它会很快变得复杂。

同样对于主要在项目中维护 CSS 的人来说，可能很难习惯 Angular 的动画语法。然后更容易阅读和维护这样的 CSS：

.container {
  opacity: 0;
  
  &.is-active {
    opacity: 1;
    transition: all 0.2s linear;
  }
}

.container__heading {
  transform: translateX(-10px);

  .container.is-active & {
      transform: none;
      transition: all 0.2s linear;
  }
}

问题：是否可以在:enter和:leave事件上添加 CSS 类而不是运行 Angular 动画？

我正在研究mat-datepicker用户可以输入值并使用我的代码选择日期的位置它工作正常。我有一个更新按钮，默认情况下它将处于禁用模式。当用户满足两个条件时，只有更新按钮才会启用。

这是我的屏幕截图，它看起来像

如果我清除最后日期，则一旦用户输入最后日期，更新按钮将处于禁用模式，那么只有更新将在此处启用我遇到了问题

这是我的 ts 代码

dateValidator(input) {
    //console.log(input);
    console.log(Object.prototype.toString.call(input) === '[object Date]', !this.disableDate(), input.length > 0)
    if (!!input) { // null check
        if (Object.prototype.toString.call(input) === '[object Date]' && !this.disableDate() && input.length > 0) {
            this.disableUpdateBtn = false;
            console.log("Date is Valid!!");
        } else {
        this.disableUpdateBtn = true;
        console.log("Date is Invalid!!");
        }
    } else {
        this.disableUpdateBtn = true;
        console.log("Date is Invalid!!");
    }
}

这是我的HTML“更新”按钮的代码

<button mat-flat-button color="primary" (click)="updateMilestone();" cdkFocusInitial [disabled]="disableUpdateBtn">
    Update
</button>

当我单击清除按钮，然后开始输入日期，然后输入 时，出现错误01。我没有收到任何错误，但是当我开始输入 …

从 Angular 13ComponentFactoryResolver开始已弃用。我找不到可以正确替换它的解决方案，因为rootSelectorOrNode新解决方案中缺少旧参数。

我想RectComponent动态创建并将其绑定到动态创建的 SVG 矩形元素。

这是我的旧解决方案：

public createRectComponent(representation:Shape<SVGRectElement>, viewContainerRef?:ViewContainerRef|null, vcrIndex?:number):ComponentRef<RectComponent>{
    const rectNode:SVGRectElement = representation.element || this.renderer.createElement('rect', 'http://www.w3.org/2000/svg') as SVGRectElement;
    representation.element = rectNode;
    const rectComponentFactory = this.componentFactoryResolver.resolveComponentFactory(RectComponent);
    viewContainerRef = viewContainerRef || this.artAccessVcr;
    const rectComponentRef = rectComponentFactory.create(viewContainerRef!.injector, [], rectNode);
    viewContainerRef!.insert(rectComponentRef.hostView, vcrIndex);
    return rectComponentRef;
}

新的方式应该是这样的：

    ...
    const rectComponentRef = viewContainerRef!.createComponent(RectComponent, {
      injector: viewContainerRef!.injector,
      projectableNodes: [],
      //rootSelectorOrNode: rectNode //This attribute is missing completly
    });
    ...

我在文档中找不到任何对此有帮助的信息，但我认为这不应该是一个特定的问题，因为很多第三方库提供了一个预定义的 html 节点，您可以使用它来绑定角度逻辑。这里的情况并非如此，但我仍然更愿意自己定义 svg 节点元素。

感谢您的时间和答复！

我在看问题：https : //stackoverflow.com/a/44737636/973651

我有一个带有ngIf条件的 div ，我想div在渲染时捕获一个事件。据说，您可以使用该AfterContentInit事件。我上面引用的文章显示了一个示例，我已经复制了该示例，但没有成功使其正常工作。

我不知道我做错了什么，但我无法让它发挥作用。我没有收到任何错误，但它对我不起作用。

我的指令定义为：

import { AfterContentInit, EventEmitter, Output, Directive } from '@angular/core';

@Directive({ selector: '[after-if]' })
export class AfterIfDirective implements AfterContentInit {
  @Output('after-if')
  public after: EventEmitter<AfterIfDirective> = new EventEmitter();

  public ngAfterContentInit(): void {
    debugger;
    setTimeout(() => {
      // timeout helps prevent unexpected change errors
      this.after.next(this);
    });
  }
}

在我的页面组件中导入。

import { AfterIfDirective } from '../directives/after-if';


@NgModule({
  providers: [],
  imports: [NgModel, BrowserAnimationsModule, HttpClientModule, 
      AfterIfDirective],
  exports: [NgModel, BrowserAnimationsModule, AfterIfDirective]
}) …

因此，我遵循了一些教程，一旦您设置了集线器，常见的主题之一C#就是调用与此类似的服务：

private hubConnection: signalR.HubConnection = new signalR.HubConnectionBuilder()
.withUrl(`${environment.hub}contacts`)
.build();

constructor(private http: HttpClient) { 
}

public startConnection = () => 
  this.hubConnection
    .start()
    .then(() => console.log('Hub Connection started'))
    .catch(err => console.log('Error while starting connection: ' + err))
    

public addTransferContactDataListener = () => 
    this.hubConnection.on('transfercontactdata', (data) => {
        this.contacts = data.result // where the magic happens on the push
        console.log(data, 'Hub data transfer occuring');
    });

我担心的是，如果你尝试private hubConnection: signalR.HubConnection在构造函数中注入它，它就会崩溃。即使您设置了连接生成器。这很重要，因为如果我想要四页或更多页全部内容怎么办subscribe？

我一直在做的是在 中设置服务，然后调用和 then 的app.component.ts方法。但这似乎是错误的。我试图将其注入到模块中，但它一直失败，说它没有或有其他东西。虽然它是可注入的，但您仍然必须调用它，并且构造函数有时在我的实践中似乎被忽略。startConnectionaddTransferContactDataListenerprovider

有没有人深入研究过在注入时调用并设置它并重用它？ …

我想onblur在我的 Angular 9 应用程序中设置一个事件处理程序，以便在有人离开页面时处理。我的相关页面被映射到具有以下内容的单个组件......

export class HotComponent implements OnInit {
  ...

  onBlur(): void {
    console.log("on blur called !!!");
  }

在模板中，我设置了这个...

<div (blur)="onBlur()">
  <div>
    ...
  </div>
</div>

但是，当我离开加载此页面的浏览器窗口并返回时，我注意到onblur处理程序尚未被调用。在 Angular 9 中实现onblur页面事件处理程序的正确方法是什么？

当我开始使用 Angular 时，我工作场所的某人告诉我在使用RxJs中的可观察量take(1)执行 API 调用时使用，声称它会在一次 API 调用后自动取消订阅。

所以我相信这个说法，并继续使用它，直到我发现组件加载时有大量渲染延迟，尤其是在页面之间导航时。

让我们看一下我的例子：

这是UserRepository与 API 对话以向应用程序授予权限的：

@Injectable({
    providedIn: 'root'
})
export class UserRepository {

    private apiUrl: string = environment.apiUrl;

    constructor(private readonly httpRequestService: HttpRequestService) {
        super();
    }

    @UnsubscribeOnDestroy()
    getPermissions() {
        return this.httpRequestService.get(`${this.apiUrl}/user/permissions`).pipe(map((res: any) => res.user));
    }
}

以及用法：

userRepository.getPermissions().pipe(take(1)).subscribe(data => ...);

我在谷歌上搜索了一下，发现它take(1)不会自动取消订阅，而且根本不是目的，它所做的只是从管道中获取一个可观察值并忽略其余部分。

为了解决这个问题，我采取了以下措施：

1. 选项#1：与,调用takeUntil一起使用来触发取消订阅unsubscriptionSubjectunsubscriptionSubject.nextngOnDestroy
2. 选项#2：BaseRepository使用 的字典创建一个methodName => Subject，因此对于每个 API 调用，我可以保存它自己的主题，并创建一个装饰器，该装饰器会自动取消订阅先前的 API 调用，并确保不会有超过一个类型的订阅API 调用的。

选项 #2 提到的装饰器和用法示例：

基础存储库 …

我已经知道inputa 中的项目FormControl可以被标记dirt或touched通过调用以下任何方法（也许更多）： group.markAsTouched(); form.get('control-name').markAsTouched(); form.markAllAsTouched(); form.controls[someIndex].markAsTouched();

但是，我可以看到该markAsTouched方法似乎在输入focus为 then时被调用blur。

有没有办法通过代码达到相同的结果？比方说，当点击一个按钮时。

在这里，您可以看到当前标准行为的 gif，无需表单，您也可以在以下实时示例中自行测试：

https://stackblitz.com/edit/angular-peq11f

对我来说，很明显这种行为应该可以由代码触发，而不仅仅是在blur事件触发时触发

像这样的东西：

<input #myInput>
<button (click)="myInput.markAsTouched()">click</button>