4

我在一个项目中使用 Angular 8，但我无法启动动态组件，因为 ngOnInit 没有被调用。我已经构建了一个名为 PlaceholderDirective 的指令，如下所示：

@Directive({
  selector: '[appPlaceholder]'
})
export class PlaceholderDirective {
  constructor(public viewContainerRef: ViewContainerRef) {}
}

并在 ng-template 上使用了该指令：

<ng-template appPlaceholder></ng-template>

包含 ng-template 所在的 HTML 的组件会启动动态组件，如下所示：

@ViewChild(PlaceholderDirective, {static: false}) private placeholder: PlaceholderDirective;
...
constructor(private componentResolver: ComponentFactoryResolver) {}
...
public launchSensorEditComponent(id: number) {
    const componentFactory = this.componentResolver.resolveComponentFactory(SensorEditComponent);
    const hostViewContainerRef = this.placeholder.viewContainerRef;
    hostViewContainerRef.clear();
    const sensorEditComponentRef = hostViewContainerRef.createComponent(componentFactory);
    sensorEditComponentRef.instance.sensorId = id;
}

实际的动态组件非常简单，注册在 AppModule 的 entryComponents 部分。我已将其缩小到最低限度，以了解问题所在：

@Component({
  selector: 'app-sensor-edit',
  templateUrl: './sensor-edit.component.html',
  styleUrls: ['./sensor-edit.component.css']
})
export class SensorEditComponent implements OnInit {
  @Input() sensorId: number;
  private showDialog: boolean = false;

  constructor() {
    console.log('constructor');
  }

  ngOnInit() {
    console.log('ngOnInit');
    this.showDialog = true;
}

最后，动态组件的 HTML：

<div *ngIf="showDialog">
  <h3>its not working</h3>
</div>

问题是动态组件中的 ngOnInit 没有被调用，我有其余的数据要在那里初始化，这样我就可以构建模板的其余部分。

真正奇怪的部分是，如果我的控制台没有打开，我打开它，反之亦然，模板就会显示出来。

4

1 回答 1

1

根据上面@codingandstuff 评论中的答案，只是想通过上面示例的代码更改使其更加清晰。

另外，我希望这个答案可以作为谷歌搜索“如何以角度生成/注入/渲染动态组件”的任何人的参考。

  1. 我们需要将公共属性 changeDetectorRef 添加到指令中：
@Directive({
  selector: '[appPlaceholder]'
})
export class PlaceholderDirective {
  constructor(
    public viewContainerRef: ViewContainerRef,
    public changeDetectorRef: ChangeDetectorRef,
  ) {}
}
  1. 现在我们需要在设置实例属性后使用它：
@ViewChild(PlaceholderDirective, {static: false}) private placeholder: PlaceholderDirective;
...
constructor(private componentResolver: ComponentFactoryResolver) {}
...
public launchSensorEditComponent(id: number) {
    const componentFactory = this.componentResolver.resolveComponentFactory(SensorEditComponent);
    const hostViewContainerRef = this.placeholder.viewContainerRef;
    hostViewContainerRef.clear();
    const sensorEditComponentRef = hostViewContainerRef.createComponent(componentFactory);
    sensorEditComponentRef.instance.sensorId = id;
    this.placeholder.changeDetectorRef.detectChanges(); // <-- this line has been added
}
  1. 享受：）

如果你已经将 Angular 升级到 13+，那么请注意，现在你可以直接提供组件类来创建组件，而无需处理 componentResolver、componentFactory 等。就像这样：

public launchSensorEditComponent(id: number) {
    const { hostViewContainerRef, changeDetectorRef } = this.placeholder;
    hostViewContainerRef.clear();
    const sensorEditComponentRef = hostViewContainerRef.createComponent(SensorEditComponent);
    sensorEditComponentRef.instance.sensorId = id;
    changeDetectorRef.detectChanges();
}
于 2021-12-06T01:01:53.673 回答