Question

我在我的应用程序中使用了很多供应商模态组件。由于所有模态的设置相同但内容不同，我想创建具有嵌入内容的下一个组件：

@Component({
  selector: 'app-modal',
  template: `
    <!-- vendor directive -->
    <div *ngIf="shown" mdbModal #form="mdb-modal" [config]="{ show: true }" class="modal fade scrollable" tabindex="-1" role="dialog" aria-hidden="true" (onHidden)="onHidden()">
      <!-- some common code here -->
      <ng-content></ng-content>
      <!-- some common code here -->
    </div>
  `,
  styles: []
})
export class ModalComponent implements OnInit {
  @Input() shown = false;
  @Output() shownChange = new EventEmitter<boolean>();

  @ViewChild('form') form;

  constructor() { }

  ngOnInit() {
  }

  onHidden() {
    this.shown = false;
  }
}

然后我想在父组件中使用它：

<app-modal [(shown)]="isModalShown">
  <!-- embedded html with parent scope -->
  <p>{{test.field}}</p>
  ...
</app-modal>

父母组件ts：

isModalShown = false; // set to true only when "test" data is prepared
test = null; // data to be prepared

我已添加＆＃34; test＆＃34;为简单起见 - 它显示了问题（我的数据仅在＆＃34; isModalShown＆＃34;为真时才有效）。所以我希望在其他情况下从DOM中删除ng-content并期望这样的行为。但实际上我得到解析访问未定义的错误＆＃34; test.field＆＃34;属性：

ERROR
Error: Cannot read property 'field' of null
Error: Converting circular structure to JSON

如果boolean标志为false，我应该怎么做才能创建具有正确行为的组件，即根本不存在于DOM中（因此使用？运算符检查测试不是一个选项）？

问题可以用这种方式解决：

<app-modal [(shown)]="isModalShown">
  <ng-container *ngIf="isModalShown">
    <p>{{test.field}}</p>
  </ng-container>
</app-modal>

但是创建这样的组件是没有意义的，我需要每次手动双重检查。有更好的解决方案吗？

如何根据需要从DOM中删除ng-content创建角度转换组件？

0 个答案: