我在我的应用程序中使用了很多供应商模态组件。由于所有模态的设置相同但内容不同,我想创建具有嵌入内容的下一个组件:
@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>
但是创建这样的组件是没有意义的,我需要每次手动双重检查。有更好的解决方案吗?