Question

我有一个页面，在点击按钮时必须显示一个模型对话框，说新用户。因此，模型对话框上有新的用户条目的表单字段。除此之外，模型上还有另一个组件，实际上是网格本身。

但是只有在模型显示时才需要加载网格。因此，网格内容可以根据模型值动态变化。但面临的问题是当页面第一次加载时，模型中的组件也会初始化并加载。如何避免这种情况并仅在模型显示时加载模型加载中的网格组件

以下是我的模型组件的一部分，其中包含第三个组件

  </div>
                    </div>
                    <div class="row">
                        <app-userlist [templateCategoryId]="0" ></app-userlist>
                    </div>

                </div>

这是app-userlist组件的初始部分

import { Component, Inject, OnInit, TemplateRef, ViewChild, Input } from '@angular/core';
import { Http, RequestOptionsArgs, RequestOptions, Headers, } from '@angular/http';
import { HttpParams } from '@angular/common/http'
import { MatDialog, MatDialogRef } from "@angular/material";
import { AppService } from "../../../services/singletons/app.service";
import { NotificationService } from "../../../services/notification.service";
import { MessageType } from '../../../models/MessageType';


@Component({
    selector: 'app-userlist',
    templateUrl: 'userlist.component.html'
})
export class UserListComponent implements OnInit {
    @Input() public templateCategoryId: number;

    ngOnInit(): void {
        if (isNaN(this.templateCategoryId)) {
            this.templateCategoryId = 0;
        }
        this.loadUserList(this.templateCategoryId);
    }

此外，当模型显示（按编辑或新按钮）时，必须动态更改参数[templateCategoryId]值。例如，如果新值为0或编辑值应该是编辑用户的ID。

任何建议都高度赞赏..

Answer 1

尝试收听模态显示/显示的事件。

根据documentation

模态完全可见时会触发

shown.bs.modal 事件

$('#newTemplateCategoryModal').on('shown.bs.modal', function () {
  //Your code that you want to perform after the modal load 
})

在 ngAfterViewInit 中添加此内容，看看它是否有效。

仅在放置的模型显示时初始化组件

1 个答案: