Question

我有一个测试部分,其中列有两项指示(一项是属性指令)。在测试部分,Im利用儿童观察所尝试和参考<代码>ngAfterViewInit的手稿。但是,每一份指令Im检测结果的 编号:<0>未界定>。当我检查该页时,这些指示出现在OMD。


Here is a StackBlitz example:
https://stackblitz.com/edit/stackblitz-starters-f3g4sv?file=src%2Ftest.component.ts
测试部分:
import {
  AfterViewInit,
  ChangeDetectionStrategy,
  Component,
  QueryList,
  ViewChild,
  ViewChildren,
  ViewEncapsulation,
} from  @angular/core ;
import { CommonModule } from  @angular/common ;
import { TestContainerDirective } from  ./test-container.directive ;
import { OtherContainerDirective } from  ./other-test-container.directive ;

@Component({
  selector:  app-test ,
  standalone: true,
  imports: [CommonModule, OtherContainerDirective],
  templateUrl:  ./test.component.html ,
  styleUrl:  ./test.component.scss ,
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppTestComponent implements AfterViewInit {
  @ViewChild(TestContainerDirective)
  public _testContainerRef!: TestContainerDirective;

  @ViewChild(OtherContainerDirective)
  public _otherContainerRef!: OtherContainerDirective;

  @ViewChildren(TestContainerDirective)
  _testContainerChildren!: QueryList<TestContainerDirective>;

  constructor() {}

  public ngAfterViewInit(): void {
    console.log( _testContainerRef , this._testContainerRef);
    console.log( _otherContainerRef , this._testContainerRef);

    console.log( _testContainerChildren , this._testContainerChildren);

    setTimeout(() => {
      console.log( _testContainerRef , this._testContainerRef);
      console.log( _otherContainerRef , this._testContainerRef);
    }, 0);
  }
}

其模板如下:
<p>This is the test component</p>
<span>
  Open the console and look for the references to the directives below
</span>

<p></p>

<div appTestContainer>test container</div>

<other-container>other container</other-container>

而且 测试指示如下:
@Directive({
  standalone: true,
  selector:  [appTestContainer] ,
})
export class TestContainerDirective {
  constructor(public viewContainer: ViewContainerRef) {}
}

@Directive({
  standalone: true,
  selector:  other-container ,
})
export class OtherContainerDirective {
  constructor(public viewContainer: ViewContainerRef) {}
}

这似乎与在笔试中的做法一样,因此我不敢肯定我所缺的东西。 任何帮助都值得赞赏。

Answer 1

页: 1 测试目录。

@Component({
  ...
  imports: [CommonModule, TestContainerDirective, OtherContainerDirective],
  ...
})

另外,还有一些错误,你将“其他内容”称为<代码>。

public ngAfterViewInit(): void {
  console.log( _testContainerRef , this._testContainerRef);
  console.log( _otherContainerRef , this._otherContainerRef);

  console.log( _testContainerChildren , this._testContainerChildren);

  setTimeout(() => {
    console.log( _testContainerRef , this._testContainerRef);
    console.log( _otherContainerRef , this._otherContainerRef);
  }, 0);
}

Demo @ StackBlitz

Answer 2

看来,问题在于你在你的执行委员会中重新进口其他缔约方。目前,你重新从共同岛屿进口,这是不正确的。相反,你应从确定指令的正确档案中进口。

为了解决这个问题,采取这些步骤:

将进口量从@angular/common 移除{共同模块};从您的执行委员会中移除。

进口其他集装箱正确档案中的指令,如果界定的话。根据你提供的StackBlitz实例,似乎与其他ContainerDirective在与上诉委员会相同的档案中作了定义。因此,您可以更新进口说明如下:

说明

import { OtherContainerDirective } from  ./test.component ;

Remove the incorrect import statement for CommonModule from the imports array in AppTestComponent. After making these changes, the ViewChild and ViewChildren decorators should be able to retrieve the references to the directives correctly. Here s the updated code for AppTestComponent:

说明

import { AfterViewInit, ChangeDetectionStrategy, Component, QueryList, ViewChild, ViewChildren, ViewEncapsulation, Directive, ViewContainerRef } from  @angular/core ;

@Directive({
  selector:  [appTestContainer] ,
})
export class TestContainerDirective {
  constructor(public viewContainer: ViewContainerRef) {}
}

@Directive({
  selector:  other-container ,
})
export class OtherContainerDirective {
  constructor(public viewContainer: ViewContainerRef) {}
}

@Component({
  selector:  app-test ,
  standalone: true,
  templateUrl:  ./test.component.html ,
  styleUrls: [ ./test.component.scss ],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppTestComponent implements AfterViewInit {
  @ViewChild(TestContainerDirective)
  public _testContainerRef!: TestContainerDirective;

  @ViewChild(OtherContainerDirective)
  public _otherContainerRef!: OtherContainerDirective;

  @ViewChildren(TestContainerDirective)
  _testContainerChildren!: QueryList<TestContainerDirective>;

  constructor() {}

  public ngAfterViewInit(): void {
    console.log( _testContainerRef , this._testContainerRef);
    console.log( _otherContainerRef , this._otherContainerRef);

    console.log( _testContainerChildren , this._testContainerChildren);

    setTimeout(() => {
      console.log( _testContainerRef , this._testContainerRef);
      console.log( _otherContainerRef , this._otherContainerRef);
    }, 0);
  }
}

在适用这些修改后,《儿童观点》和《儿童观点》应重新正确提及《儿童意见》中的指示。

友情链接